Почему не работает анимация?

Question

[Артур Кудашев]

Здравствуйте, узнал про CSSTransition в React и решил их применить для своего сайта, но встретился с проблемой.

index.js

<TransitionGroup>
    <CSSTransition classNames = 'form-anim' timeout = { 1000 }>
        <form className = 'form'>
            <input className = 'form-input' />
        </form>
    </CSSTransition>
</TransitionGroup>

style.css

.form-anim-enter {
	opacity: 0;
}

.form-anim-enter .form-anim-enter-active {
	opacity: 1;
	transition: all 1s;
}

.form-anim-exit {
	opacity: 1;
}

.form-anim-exit .form-anim-exit-active {
	opacity: 0;
	transition: all 1s;
}

Проблема в том, что если посмотреть через инспектор, то форма оборачивается div, у которого нету классов.

P.S. все импортировал, в консоли нету ошибок.

Answer 1

[Антон Спирин]

Анимация детей TransitionGroup срабатывает только для элементов добавленных или удаленных после монтирования TransitionGroup.

TransitionGroup is a state machine for managing the mounting and unmounting of components over time.

Посмотрите пример из официальной документации.

Comments

[Артур Кудашев]

Антон Спирин в теории понял, но не могу понять как решить мою проблему.

[Антон Спирин]

Артур Кудашев, вы форму по какому-то событию хотите показывать?

[Артур Кудашев]

Антон Спирин, да. При клике на кнопку у формы меняется state и она должна плавно появиться.

[Антон Спирин]

Артур Кудашев, в документации есть пример с нужным вам поведением.

[Артур Кудашев]

Антон Спирин, я знаю, но к форме не применяются новые классы

[Антон Спирин]

Артур Кудашев, что-то неправильно делаете. Пример.