L'animation d'un personnalisé carrousel avec React.js

J'ai créé un carrousel avec React.js il était simple jusqu'à ce que je suis arrivé à l'animation problème. Le carrousel est classique, elle est composée de "slides" de contenu, de petites balles en indiquant la diapositive en cours, et de petites miniatures pour naviguer entre les diapositives.

Le carrousel composant est piloté par les données, ce qui signifie qu'il est passé à son contenu comme un tableau d'objets javascript. Chaque diapositive est un li balise à l'intérieur d'un ul, et juste à changer le margin-left propriété css de la ul pour passer d'une diapositive à l'autre.

Je me demandais si je devrais utiliser le ReactTransitionGroup ou ReactCSSTransitionGroup pour animer la transition d'une diapositive à l'autre. Fondamentalement, la transition est un effet de glissement de la gauche vers la droite lorsque vous passez d'une diapositive à l'autre.

Ma compréhension est que le ReactTransitionGroups de l'API est utile lors de l'ajout ou la suppression de certains contenus. Ici je ne vais pas ajouter/supprimer une diapositive, la vidange le visible avec une animation.

Ma difficulté enveloppant ma tête, c'est que j'ai développé un statique (aka sans animation) carrousel où la diapositive actuellement affichée est le seul état enregistrées dans le composant. Cet état est juste l'index de la diapositive dans le tableau de diapositives. Alors, quand je clique sur une vignette pour naviguer numéro de la diapositive n, la seule chose que je fais, c'est la mise à jour de cet état intérieur, alors le rendu prend soin de réglage de la left propriété de style basé sur cet indice.

Je ne vois pas comment je peux ajouter une animation à ce manège. Toute aide/conseil grandement apprécié.

Vous pouvez simplement utiliser CSS3 transitions sur la marge de gauche; la seule partie délicate, c'est quand vous êtes à la fin et que vous voulez aller à l'index 0.
Mmmh... La "fin" de la partie est déjà pris en charge dans mon code, donc ça devrait faire l'affaire. Merci !
Pourriez-vous partager votre code afin que d'autres puissent aussi en bénéficier..
C'est à code source fermé, pour un projet commercial. Mais il pourrait être abandonnée pour quelque chose d'autre. Si c'est le cas, je n'ai pas de problème de partage. Restez à l'écoute.
et donc, ce go? plus d'infos?

OriginalL'auteur DjebbZ | 2014-04-28

  1. 5

    La réponse était assez simple, pas besoin d'utiliser ReactTransitionGroup ou ReactCSSTransitionGroup. J'ai simplement utilisé du css avec des transitions css3.

    Dans le render fonction, nous avons calculer dynamiquement la propriété à gauche. Comme nos diapositives ont tous la même largeur fixe, les diapositives sont affichés en ligne et qu'un slide est rendu visible grâce à overflow: hidden sur l'élément parent. Notre classe dynamique de code ressemble à ceci :

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

    Ne regarde pas la formule de trop, c'est un détail d'implémentation.

    Note en outre, notre carrousel est "infini", ce qui signifie que la transition toujours aller dans un seul sens (de gauche à droite - même si sur le premier ou le dernier élément. C'était "juste" une question de jouer avec les indices de la matrice de contenu. Cette partie a été un peu plus dur que le carrousel de lui-même.

    Note de côté (même troll) : même le plus difficile a été de mieux que de faire délicat et cabalistique direct de manipulation du DOM, car il était de la pure algorithmes avec des données. Pas plus jQuery pour ce genre de choses, et même pour le reste de notre site web.

    Plusieurs mois plus tard, nous avions besoin d'une plus complète carousel, et nous avons été très heureux de passer à slick carrousel. Nécessite jQuery, mais bien la peine.
    Avez-vous pris un coup d'oeil à github.com/akiran/react-slick?
    Au moment de ma question, le projet n'existait pas. Donc non, je n'ai jamais regardé. Après un rapide coup d'œil il ressemble à Réagir wrapper autour de la nappe de-carousel.
    Si vous avez besoin d'une image de la galerie du carrousel découvrez github.com/xiaolin/react-image-gallery

    OriginalL'auteur DjebbZ