React CSSTransition无法正常工作？

Question

我试图让登录组件在页面加载时淡入，然后在呈现新组件时淡出。只是没有出现任何褪色。我在其他文章中读过您需要密钥，但是我不知道在这种情况下密钥值是多少？

return (
        <div className="box2">
                            <CSSTransition
                                transitionName="example"
                                transitionAppear={true}
                                transitionAppearTimeout={500}
                                transitionEnter={false}
                                transitionLeave={false}>
                        <Login/>
                            </CSSTransition>
                            <Button bsStyle="primary" 
    onClick={this.changeView}>SUBMIT</Button>
                        </div>
);

CSS：

example-enter {
    opacity: 0.01;
}

.example-enter.example-enter-active {
    opacity: 1;
    transition: opacity 500ms ease-in;
}

.example-leave {
    opacity: 1;
}

.example-leave.example-leave-active {
    opacity: 0.01;
    transition: opacity 300ms ease-in;
}


.example-appear {
    opacity: 0.01;
}

.example-appear.example-appear-active {
    opacity: 1;
    transition: opacity .5s ease-in;
}

Answer 1

您正在使用版本2的CSSTransition组件，但正在传递版本1的道具名称。如果您在控制台中查看，您可能会看到警告，提示React无法识别'transitionName'，'transitionAppear'等。

这是使用版本2的CSSTransition组件来完成您要寻找的内容的一种方法。

<CSSTransition
  classNames="example"
  timeout={500}
  in={this.state.mounted}
>
  <Login/>
</CSSTransition>

默认情况下，该CSSTransition组件不会enter在页面加载时运行动画，因此您需要将inprop 设置为某个任意值，该值以false开始但在on设置为true componentDidMount。这是一个CodeSandbox，因此您可以看到完整的实现：https ://codesandbox.io/s/v8w3jxo94l