Как сделать плавное появление и исчезновение в React?

Question

[Дмитрий]

Добрый день.

Ломаю голову как сделать плавное появление и исчезновение уведомление в React.
Подозреваю что нужно играться с функциями жизненного цикла компонена, вроде componentDidMount и componentWillUnmount, но до конца не могу понять.

Может, при вставке компонента в DOM давать классу opacity: 0, а потом в componentDidMount ставить таймером setState({ visibility: true }) а в компоненте style={ this.state.visibility ? { opacity: 1 } : { opacity: 0 } } ?

Или может быть прямо из componentDidMount есть доступ к элементу для прямого присвоения opacity?

Comments

[copal]

допускаемого реактом доступа из componentDidMount нет.

[Дмитрий]

copal: есть только к state и props, верно? теоретически еще через refs можно получить доступ

[everliving]

Обычный css keyframes тут не пойдет?

Answer 1

[Aves]

https://facebook.github.io/react/docs/animation.ht...

Comments

[Дмитрий]

Спасибо, рассмотрю такой вариант, но думаю, что можно обойтись lifecycle-функциями

[Aves]

Дмитрий: ну тогда просто по ref можно обратиться к dom-элементу из componentDidMount
https://facebook.github.io/react/docs/more-about-r...

[Дмитрий]

Aves: да, можно) Вопрос только что дальше делать. Взяли мы в componentDidMount элемент, навесили на него opacity: 1 но анимации нету, а если таймаут в 50мс поставить - уже есть. Странно

[Aves]

Дмитрий: componentDidMount выполняется после вставки элементов в dom, но до того, как браузер успевает закончить их отрисовку, скорее всего из-за этого. Ниже правильно написали, setTimeout или requestAnimationFrame обычная практика.