React-Spring - изменить скорость анимации перехода - PullRequest
Новая
       54

React-Spring - изменить скорость анимации перехода

3 голосов
/ 24 октября 2019

Я пытаюсь изменить скорость перехода по умолчанию к постепенному исчезновению и постепенному исчезновению, но в документации, похоже, не упоминается, как это сделать: 

<Transition
  items={show}
  from={{ opacity: 0 }}
  enter={{ opacity: 1 }}
  leave={{ opacity: 0 }}>
  {show => show && (props => <div style={props}>✌️</div>)}
</Transition>

Учитываяэтот код, как мне сделать анимацию постепенного исчезновения / увеличения / замедления?

Я попытался сделать это (ниже), но в итоге он полностью сломал переход. Анимация больше не работает: 

from={{ opacity: 1, transitionDelay: "5000ms" }}
enter={{ opacity: 1, transitionDelay: "5000ms" }}
leave={{ opacity: 0, transitionDelay: "5000ms" }}

Есть идеи?

Ответы [ 2 ]

2 голосов
/ 24 октября 2019

Вы должны добавить config реквизит к Transition и пройти в нем длительность: 

<Transition
  config={{ duration: 5000 }}
  items={show}
  from={{ opacity: 0 }}
  enter={{ opacity: 1 }}
  leave={{ opacity: 0 }}>
  {show => show && (props => <div style={props}>✌️</div>)}
</Transition>
1 голос
/ 24 октября 2019

React-spring использует физическую модель. Таким образом, вы можете либо установить физические атрибуты модели, либо указать длительность, как указано выше. Если вы установите продолжительность, то она переключится на модель, основанную на времени. Но нам нравится реагирующий источник из-за его физической модели.

Я рекомендую настроить физические атрибуты. Вы можете играть с основными атрибутами здесь: https://www.react -spring.io / docs / hooks / api

Это масса, растяжение, трение. Если вы уменьшите массу и трение и увеличите натяжение, то скорость также увеличится. Вы также можете установить начальную скорость, с положительной скоростью вы также можете увеличить скорость. При более высокой скорости будет более вероятен выброс, когда анимация будет колебаться. Вы можете остановить выброс с помощью параметра конфигурации зажима. Он остановит анимацию, когда достигнет своей конечной точки.

Следующая конфигурация довольно быстрая 

<Transition
  items={show}
  config={mass:1, tension:500, friction:18}
  from={{ opacity: 0 }}
  enter={{ opacity: 1 }}
  leave={{ opacity: 0 }}>
  {show => show && (props => <div style={props}>✌️</div>)}
</Transition>

Если вы хотите быстрее, вы можете уменьшить трение и вы можете остановить перерегулирование,Например: 

config={mass:1, tension:500, friction:0, clamp: true}

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

...