Блог

Я сделал копию своего компонента в code sandbox ссылка ниже:

редактировать, у меня была неправильная песочница кода ссылки: https://codesandbox.io/live/51b7904840a

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

щелчок далее: следующие элементы списка, которые мы показываем, вставляются с правой стороны, а существующие оставляются с левой стороны.

щелчок по предыдущему: следующие элементы списка, которые мы показываем, скользят с левой стороны, а существующие остаются с правой стороны.

Однако на данный момент я вижу две проблемы в моей изолированной среде кода:

1. Я не знаю, как я могу вызвать появление элементов списка с левой стороны с анимацией (когда я нажимаю кнопку «предыдущий»). Я знаю, что могу установить начальное свойство, но как я могу сделать так, чтобы при нажатии на кнопку «предыдущий» элементы списка перемещались с левой стороны?
2. Кажется, что когда я перехожу с шага 1 на шаг 2, вместо того, чтобы вставлять весь список, это только 2 дополнительных элемента (потому что шаг 1 содержит 3 элемента, а шаг 2 содержит 5 элементов). Что я могу сделать, чтобы убедиться, что все они 5 скользят?