reactjs - CSSTransition 持续时间不起作用
问题描述
我正在尝试使用CSSTransitionduration
来实现向下滑动动画,但它似乎transition
不起作用。
组件.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;
}
解决方案
来自库文档:当in
prop 切换为 true 时,组件将获得example-enter
CSS 类,并example-enter-active
在下一个刻度中添加 CSS 类。这是基于classNames
道具的约定。
首先,在您的情况下,in
永远不会评估为 true 因为showBirthInput
is undefined
。
其次,它必须与 JS 评估有关,因为如果我取出 JS 评估并要求CSSTransition
对其进行渲染,show
则可以完美运行。
这是基于您的代码的工作示例: https ://stackblitz.com/edit/react-pshw1h?file=index.js
推荐阅读
- nginx - Nginx - 创建多个子域
- c# - 将连接字符串保存为 xml 文件
- html - 没有单词时如何修复高度dt和dd
- c# - “成员 'Class1.GetChar(string, int)' 无法通过实例引用访问
- ssl - 在 SSL 双向认证中,客户端和服务器证书究竟是如何相互认证的?
- opengl-es - eglCreateImageKHR is working only with RGBA8888 format. How to send RGB888 data?
- reactjs - 我将如何使用 React Hooks 替换我的 withAuth() HOC?
- python-2.7 - 将 List 转换为整数或浮点数
- android - 健身器械(如 NordicTrack iFit)的 API 是否开放?我可以编写一个应用程序来控制我的蓝牙机器吗?
- read-the-docs - 在 ReadTheDocs 托管的 Mkdocs 中使用额外的 CSS 文件