реагировать активировать анимацию перед сменой реквизита - PullRequest
Новая
       9

реагировать активировать анимацию перед сменой реквизита

1 голос
/ 14 марта 2019

У меня есть простое приложение реагирования, которое содержит 3 компонента: app, ul и li.Приложение содержит массив элементов.Каждые 5 секунд (с заданным интервалом) приложение нарезает 3 последовательных элемента и отправляет их на отображаемый компонент ul.Если мы начнем с:

элемент 3 элемент 2 элемент 1

через 5 секунд список будет:

item 4 item 3 item 2

Я пытаюсь создать анимацию, которая после перехода на улицуобновляются, будут толкать текущий список, пока нижний элемент не будет скрыт, и после этого следующий элемент должен появиться сверху.Я подумал об использовании метода getDerivedStateFromProps для активации анимации, использую async await, чтобы удерживать приложение до конца анимации (translateY), а затем применил еще одну анимацию непрозрачности к новому элементу.Я не думаю, что это хорошее решение, и я думаю, что должен быть более простой способ сделать это.Я также попытался использовать группу переходов реагирования, но она работает только при появлении элемента, а не при изменении содержимого.Я был бы рад, если бы кто-нибудь мог указать мне правильное направление.

1 Ответ

0 голосов
/ 15 марта 2019

Существует множество вариантов анимации событий такого типа в React.

Обычно его называют Transition , потому что вам нужно анимировать компонент перед его размонтированием.Вы можете:

  1. Реализовать это самостоятельно :

    Используя состояние в компоненте <ul>.Ваш ul должен отслеживать каждый элемент, который он отображал в своем состоянии, и удалять элемент из списка только в том случае, если этот элемент вызвал обратный вызов в конце своей анимации.

    Сделайте так, чтобы ваши компоненты li моглиполучить shouldGoAway реквизит в качестве логического значения и animationCallback, который будет вызываться после окончания анимации.Ли должен проверить if prop.shouldGoAway и, если это правда, должен анимировать себя, чтобы выпасть из поля зрения (используйте библиотеку анимации реакции, например, response-spring , библиотеку анимации js, например, animejs .или чистые CSS-анимации ) и вызовите animationCallback, когда это будет сделано.

  2. Используйте одну из множества библиотек анимации React, которые поддерживают анимацию Transition.

    На ум приходят следующие варианты: группа реагирования-перехода , пружина реакции и реакция-движения .

Удачи.

...