CSS 持续时间不起作用

Question

我正在尝试使用 CSSTransition 实现下滑动画，但似乎transitionduration都不起作用。

代码笔

组件.jsx

let { CSSTransition, TransitionGroup } = ReactTransitionGroup
class Example extends React.Component {
state = {
show: false,
};
render() {
return (
<div>
<button onClick={() => this.setState({
show: true })}>Show</button>
{this.state.show && (
<CSSTransition in={this.state.show} timeout={2000} classNames="birthday-input" appear>
<div className="form-group birthday-input">
<h1>HEADER</h1>
</div>
</CSSTransition> 
)}
</div>
);
}
}
ReactDOM.render(
<Example />,
document.getElementById('root')
);

组件.scss

.birthday-input-enter {
max-height: 0;
}
.birthday-input-enter-active {
-webkit-transition: max-height 1s ease;
max-height: 1000px;
}
.birthday-input-exit {
max-height: 1000px;
}
.birthday-input-exit-active {
max-height: 0;
-webkit-transition: max-height 1s ease;
}

Answer 1

从库文档中： 当inprop 切换为 true 时，组件将获得example-enterCSS 类和在下一个刻度中添加的example-enter-activeCSS 类。这是基于classNames道具的约定。

首先，在您的情况下，in永远不会计算为 true，因为showBirthInput是undefined。

其次，它必须对 JS 评估做一些事情，因为如果我取出 JS 评估并要求CSSTransition在show上渲染，它就可以完美运行。

下面是基于您的代码的工作示例： https://stackblitz.com/edit/react-pshw1h?file=index.js