Как приостановить дизмаунт компонента чтобы отработала анимация?

Question

[Verstatel3000]

хочу сделать анимированные переходы по страничкам используя хок, но как сделать чтобы анимация скрытия компонента отрабатывала до того как компонент дизмаунтится.
вот код ХОКа:

import React from 'react';

const withFade = (PassedComponent) => {
    return class extends React.Component {
        state = {
            wrapperStyle: {
                transition: 'opacity .2s ease-out',
                opacity: '0'
            }
        }


        unfade = () => this.setState({ wrapperStyle: { ...this.state.wrapperStyle, opacity: '1' } })
        fade = () => this.setState({ wrapperStyle: { ...this.state.wrapperStyle, opacity: '0' } })
        componentDidMount = () => { this.unfade() }
        componentWillUnmount = () => { this.fade() }
        render() {
            return (
                <div style={this.state.wrapperStyle}>
                    <PassedComponent
                        {...this.props}
                    />
                </div>
            )
        }
    }
}
export default withFade

Answer 1

[kn1ght_t]

https://github.com/reactjs/react-transition-group

Comments

[Verstatel3000]

положим либы мне не подходят, хочу сам написать, есть способ?

Answer 2

[Антон Неверов]

Возможно, хватит метода componentWillUnmount()

Answer 3

[profesor08]

Никак не приостановить. Делать надо по другому, у тебя у тебя должно быть некоторое условие, по которому отображается компонент. Пусть это будет некоторое свойство show. Если оно true, то компонент появляется, если false, то исчезает. Тебе придется завести еще одно свойство, которое будет отвечать за рендер компонента в DOM, shouldRender. Так вот в зависимости от show, подставляй себе нужные стили компоненту, лучше анимацию на @keyframes. Далее аниммированному элементу можно задать onAnimationEnd, и в нем в зависимости от значение show, задать значение для shouldRender, если shouldRender, будет false, то компонент исчезнет из DOM.

Подробнее тут:
https://dev.to/michalczaplinski/super-easy-react-m...

Answer 4

[Александр Баталов]

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