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 SELECT n_latest.NoteCode, n_latest.NoteDate, n_prev.NoteCode AS NoteCode2nd, n_prev.NoteDate AS NoteDate2nd FROM Locations l OUTER APPLY (SELECT n.* FROM Notes n WHERE n.NoteCode = 'NOTIFY' AND n.NoteDate BETWEEN @DateFrom AND @DateTo ORDER BY n.NoteDate DESC OFFSET 0 ROWS FETCH FIRST 1 ROW ONLY ) n_latest OUTER APPLY (SELECT n.* FROM Notes n WHERE n.NoteCode = 'NOTIFY' AND n.NoteDate BETWEEN @DateFrom AND @DateTo ORDER BY n.NoteDate DESC OFFSET 1 ROWS FETCH FIRST 1 ROW ONLY ) n_prev组件完成所需内容的方法。

CSSTransition

默认情况下，<CSSTransition classNames="example" timeout={500} in={this.state.mounted} > <Login/> </CSSTransition>组件在页面加载时不会运行CSSTransition动画，因此您需要将enter道具设置为某个以false开头但设置为的任意值在in上为真。这是一个CodeSandbox，因此您可以看到完整的实现：https://codesandbox.io/s/v8w3jxo94l

反应CSSTransition无法正常工作？

1 个答案: