Может ли анимировать скрытый/удаленный компонент?

Я знаю, что с помощью ReactCSSTransitionGroup вы можете применить его к списку элементов и затем оживить по мере их появления или исчезновения. Как насчет одного компонента?

См. JSFiddle здесь, где у меня есть анимация CSS при появлении элемента. Но я не знаю, есть ли способ сделать его живым при скрытии.

Ответы

Ответ 1

Конечно! Просто используйте варианты enter и leave (хотя вы всегда должны отображать компонент TransitionGroup):

var TheThing = React.createClass({
    render() {
        var component;
        if (this.props.visible) {
            component = <div className="the-thing">The Thing</div>;
        }

        return (
            <ReactCSSTransitionGroup transitionName="thing">
                {component}
            </ReactCSSTransitionGroup>
        )
    }
});

.thing-enter {
  opacity: 0.01;
  transition: opacity 1s ease-in;
}

.thing-enter.thing-enter-active {
  opacity: 1;
}

.thing-leave {
  opacity: 1;
  transition: opacity 1s ease-in;
}

.thing-leave.thing-leave-active {
  opacity: 0.01;
}

Пример: https://jsfiddle.net/BinaryMuse/3fkso0kq/