反应 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 动画，因此您需要将 in 属性设置为任意值，该值以 false 开头，但在 componentDidMount 上设置为 true .这是一个 CodeSandbox，因此您可以看到完整的实现：https://codesandbox.io/s/v8w3jxo94l