#reactjs #react-transition-group
#reactjs #react-transition-group
Вопрос:
Просто хочу сделать быструю анимацию модального всплывающего окна с react-transition-group
текущее поведение: https://codesandbox.io/s/525zj4vwrk
ожидаемый результат: https://codesandbox.io/s/7m9721y03x
Похожий код, но почему-то первый не работает?
Ответ №1:
Просто отсутствует свойство unmountOnExit.
<CSSTransition in={show} timeout={300} classNames="alert" unmountOnExit>
Рабочий пример (если вам не нравится кнопка, появляющаяся под «модальным» при исчезновении, тогда, как и в другом примере, используйте два набора state with onEnter и onExited properties ) :
Комментарии:
1. Спасибо. 1. Зачем это нужно
unmountOnExit? Я представляю, что непрозрачность карты должна быть равна 0 при выходе. 2. А также, если я применяю к карте стиль opacity: 0, он странно мигает. Почему?2. 3. И, честно говоря, вы думаете, что react-transition-group по-прежнему является опцией перехода к анимации реакции? Вы используете что-то еще, например, react-spring?
3. Его нужно
unmountOnExitудалить изDOM. В противном случае он всегда присутствует (отсюда и мигающая анимация, которую вы получали). Я лично не использую анимацию. Хотя они могут отлично выглядеть на экране, они могут занимать ценные ресурсы и добавлять ненужное время ожидания. Большинство веб-приложений (таких как target, reddit и imgur) имеют очень мало (если вообще есть) анимаций. Производительность имеет приоритет над «круто».