Анимация пользовательской карусели с помощью React.js

Question

Я создал карусель с React.js, это было просто, пока я не добрался до проблемы с анимацией. Карусель классический, он состоит из «слайдов» контента, небольших пуль, обозначающих текущий слайд, и небольших миниатюр для навигации между слайдами.

Компонент карусели управляется данными, что означает, что он передал его содержимое как массив объектов javascript. Каждый слайд является тегом li в пределах ul, и просто нужно изменить свойство margin-left css ul для перемещения с одного слайда на другой.

Мне интересно, следует ли использовать ReactTransitionGroup или ReactCSSTransitionGroup для анимирования перехода с одного слайда на другой. В основном переход является скользящим эффектом слева направо при переходе с одного слайда на другой.

Я понимаю, что API ReactTransitionGroup s полезен при добавлении или удалении некоторого содержимого. Здесь я не буду добавлять/удалять слайд, меняя видимый на анимацию.

Мое затруднение, обертывающее мою голову вокруг этого, заключается в том, что я разработал старую (ака без анимации) карусель, где текущий отображаемый слайд является единственным состоянием, сохраненным в компоненте. Это состояние является только показателем слайда в массиве слайдов. Поэтому, когда я нажимаю миниатюру, чтобы переместить номер слайда n, единственное, что я делаю, это обновление этого внутреннего состояния, тогда рендеринг позаботится о настройке свойства стиля left на основе этого индекса.

Я не вижу, как я могу добавить анимацию в эту карусель. Любая помощь/подсказка получили высокую оценку.

Answer 1

Ответ был довольно простым, не нужно использовать ReactTransitionGroup или ReactCSSTransitionGroup. Я просто использовал встроенный css с переходами css3.

В функции render мы динамически вычисляем свойство left. Поскольку наши слайды имеют одинаковую фиксированную ширину, слайды отображаются встроенными, и только один слайд становится видимым благодаря overflow: hidden на родительском элементе. Наш динамический код класса выглядел так:

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

Не смотрите на формулу слишком много, это деталь реализации.

Обратите внимание: наша карусель «бесконечна», что означает, что переход всегда идет в одну сторону - слева направо - даже когда на первом или последнем элементе. Это был «просто» вопрос игры с индексами массива контента. Эта часть была немного сложнее, чем сама карусель.

Боковое примечание (даже тролль): даже тяжелая часть была лучше, чем выполнение сложной и каббалистической прямой манипуляции с DOM, поскольку это были чистые алгоритмы с данными. Больше нет jQuery для этого материала и даже для остальной части нашего веб-сайта.