He creado un carrusel con React.js fue simple, hasta que llegué a la animación problema. El carrusel es un clásico, se compone de «diapositivas» de contenido, de pequeñas viñetas que indica la diapositiva actual, y de las pequeñas miniaturas para navegar entre las diapositivas.

El carrusel componente está orientado a datos, lo que significa que se pasa de su contenido como un array de javascript de los objetos. Cada diapositiva es una li la etiqueta dentro de un ul, y sólo tiene que cambiar el margin-left propiedad css de la ul para pasar de una diapositiva a otra.

Me pregunto si debo utilizar el ReactTransitionGroup o ReactCSSTransitionGroup para animar la transición de una diapositiva a otra. Básicamente, la transición es un efecto de deslizamiento de izquierda a derecha al pasar de una diapositiva a otra.

Mi entendimiento es que el ReactTransitionGroups API es útil cuando la adición o eliminación de algunos de los contenidos. Aquí no voy a agregar/quitar cualquier diapositiva, cambiar cambiar la visible con una animación.

De mi dificultad para envolver mi cabeza alrededor de esto es que he desarrollado una estática (aka sin animación) carrusel donde la diapositiva que se muestra actualmente es el único estado que guarda en el componente. Este estado es sólo el índice de la diapositiva en la matriz de diapositivas. Así que cuando hago clic en una miniatura para navegar número de diapositiva n, la única cosa que voy a hacer es la actualización de este estado interno, entonces la representación se encarga de establecer la left estilo de propiedad con base en este índice.

No veo cómo puedo añadir animación a este carrusel. Cualquier ayuda/sugerencia muy apreciado.

  • Usted puede utilizar las transiciones CSS3 en la margen izquierda; la única parte difícil es cuando estás en el final y quiero ir a índice 0.
  • Mmmh… El «fin» de la parte ya está al cuidado de mi código, lo que debe hacer el truco. Gracias !
  • Podrías compartir el código para que otros puedan también beneficiarse de ella..
  • Es de código cerrado, para un proyecto comercial. Pero podría ser abandonados por algo más. Si es el caso que voy a tener ningún problema en compartirlo. Estad atentos.
  • entonces, ¿cómo tendría que ir? más info?
  • No fue abandonado, por lo que fue desarrollada. Yo no puedo compartir el código completo. Pero mira la respuesta, voy a mostrar cómo lo hizo.

InformationsquelleAutor DjebbZ | 2014-04-28

1 Comentario

  1. 5

    La respuesta fue bastante simple, sin necesidad de utilizar ReactTransitionGroup o ReactCSSTransitionGroup. Simplemente utiliza css en línea con transiciones css3.

    En el render función, podemos calcular de forma dinámica la propiedad de la izquierda. Como nuestras diapositivas, todos tienen el mismo ancho fijo, las diapositivas se muestran en línea y sólo una diapositiva se hace visible gracias a overflow: hidden en el elemento principal. Nuestra dinámica de código de clase se veía así :

    var styles = {
        position: "absolute",
        top: 0,
        left: IMG_WIDTH * (this.props.idx - this.props.activeIdx),
        zIndex: 100,
        transition: 'left 1s',
        width: '100%'
    };

    No se ven en la fórmula mucho, es un detalle de implementación.

    Más nota, nuestro carrusel es «infinito», lo que significa que la transición ir siempre de una manera – de izquierda a derecha – incluso cuando en el primer o último elemento. Era «sólo» una cuestión de jugar con los índices de la matriz de contenido. Esta parte fue un poco más difícil que el carrusel de sí mismo.

    Nota de lado (incluso troll) : incluso la parte más difícil era mejor que haciendo difícil y cabalísticos directa de manipulación DOM desde que era pura algoritmos con los datos. No más de jQuery para estas cosas, e incluso para el resto de nuestro sitio web.

    • Varios meses más tarde, se necesitaba una más completa carrusel, y estamos muy contentos de cambiar a slick carrusel. Requiere de jQuery pero merece la pena.
    • Has echado un vistazo a github.com/akiran/react-slick?
    • En el momento de mi pregunta, el proyecto no existe. Así que no, nunca lo he mirado. Después de un rápido vistazo, se ve como un Reaccionan envoltura alrededor de la mancha de carrusel.
    • Si usted necesita una imagen de la galería carrusel de salida github.com/xiaolin/react-image-gallery

Dejar respuesta

Please enter your comment!
Please enter your name here