Question

我是React的初学者，并且很难确定如何使用CSSTransition组件为从一个组件到另一个组件的过渡设置动画。我的组件结构是这样的：

<StyleComponent>
    <LeftPanel />
    <RightPanel />
</StyleComponent>

在StyleComponent的状态下，我在RightPanel的render方法中有一个计数器（stepNumber，通过单击按钮增加的变量），它通过props来渲染组件中的不同组件，

const componentToShow = null;
if(stepNumber === 1) {
    componentToShow = <CSSTransition in={this.state.isLoaded}  key={this.props} timeout={3000} classNames="example"><Component_1 /></CSSTransition>
} else {
    componentToShow = <CSSTransition in={this.state.isLoaded}  key={this.props} timeout={3000} classNames="example"><Component_2 /></CSSTransition>
}
return <div className="gallery-container">{componentToShow}</div>;

都使用文本呈现简单的div。但是，我只是不能让它们淡入。如果component_1不淡入，但是component_2必须淡入是可以的。

注意：我知道CSSTransition组件的prop需要是虚假的，然后再设置为true值。因此，在Component_1的componentWillUnmount（）方法期间，我尝试使用setState重新渲染以更新“ in”属性。，但无济于事。

我的班级名字是：

.example-enter {
    opacity: 0;
}
.example-enter-active {
    opacity: 1;
    transition: opacity 3000ms;
}
.example-exit {
    opacity: 1;
}
.example-exit-active {
    opacity: 1;
    transition: opacity 3000ms;
}

如何在React中为从一个组件过渡到另一个组件设置动画？

0 个答案: