@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
  • Вопрос задан
  • 291 просмотр
Пригласить эксперта
Ответы на вопрос 4
profesor08
@profesor08 Куратор тега JavaScript
Никак не приостановить. Делать надо по другому, у тебя у тебя должно быть некоторое условие, по которому отображается компонент. Пусть это будет некоторое свойство show. Если оно true, то компонент появляется, если false, то исчезает. Тебе придется завести еще одно свойство, которое будет отвечать за рендер компонента в DOM, shouldRender. Так вот в зависимости от show, подставляй себе нужные стили компоненту, лучше анимацию на @keyframes. Далее аниммированному элементу можно задать onAnimationEnd, и в нем в зависимости от значение show, задать значение для shouldRender, если shouldRender, будет false, то компонент исчезнет из DOM.

Подробнее тут:
https://dev.to/michalczaplinski/super-easy-react-m...
Ответ написан
radist2s
@radist2s
Back-end и front-end разработчик
Если у вас предполагается больше количество анимаций, то можно воспользоваться специальными библиотеками для React. Я использую Framer Motion, кстати ваша задача решается в рамках функционала этого же модуля.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы