React CSSTransition Group работает не так, как ожидалось - PullRequest
Новая
       27

React CSSTransition Group работает не так, как ожидалось

0 голосов
/ 02 мая 2020

Я использую реагирующую группу в своем проекте. В большинстве случаев, таких как показ / скрытие некоторого всплывающего окна или списка элементов, CSSTransition работает как положено. Но в некоторых случаях я неправильно понимаю поведение и не могу получить ожидаемый результат. Вот пример: 

class CharacterState extends Component {

    getCssTransitionClasses = () => ({
        appearActive: "character_state_show",
        enterActive: "character_state_show",
        exitActive: "character_state_hide"
    });

    render() {
        return (
            // appear is necessary here to show animation at the first mount (IDKW)
            <CSSTransition in={this.props.isVisible} timeout={{enter: 750, exit: 500}}
                           classNames={this.getCssTransitionClasses()} appear mountOnEnter unmountOnExit
                           onEnter={() => console.log("onEnter")}
                           onEntering={() => console.log("onEntering")}
                           onExiting={() => console.log("onExiting")}
                           onExit={() => console.log("onExit")}>
                <Image className={this.props.state + "_state_img"}
                       src={getCharacterActionsImgSrc() + this.props.state + ".png"}
                       alt={this.props.state + ".png"}/>
            </CSSTransition>
        );
    }
}

CharacterState.propTypes = {
    isVisible: PropTypes.bool.isRequired,
    state: PropTypes.string.isRequired,
};

export default CharacterState;

В приведенном выше коде я просто применяю переход css, когда мой компонент должен отображаться на экране и когда он скрыт. Но кажется, что он никогда не достигает ни " enter " / " enter-active ", ни " exit-active " / " exit"гос. Поэтому в моей консоли я получаю только журнал «onEnter», соответствующий состоянию « появляются », даже если мой компонент отображается, а затем скрыт на экране. Обычно я никогда не использую appear в своих компонентах, но для этого случая это как обходной путь, чтобы по крайней мере получить анимацию, когда компонент появляется (но ничего не анимируется, когда он скрыт). Так вот интересно, чего мне здесь не хватает? Почему я могу вызвать состояние " появляются ", а не состояния " enter " или " exit "? Этот компонент является позицией: абсолютная, может быть, отсюда?

Я также использую некоторые списки с этим отображением и скрываю компоненты с анимацией, как и ожидалось, но с одним из списка, только первый компонент не вызывает " enter * 1026" * "/" enter-active ", поэтому мне пришлось добавить также appear и добавить appearActive класс в качестве обходного пути.

Я надеюсь, что вы можете помочь мне понять, чего мне здесь не хватает в оба случая, спасибо!

...