我正在 React 组件中创建淡出警告/错误消息( Bootstrap 样式),并且我在淡出时间方面遇到了一些问题。
到目前为止我的淡出效果很好,现在是这样的:
import React, { Component } from 'react'
import classnames from 'classnames'
class AlertMessage extends Component {
state = ({ autoHide: false })
componentDidMount(){
const { autoHide } = this.props
if (autoHide && !this.state.hasClosed) {
setTimeout(() => {
this.setState({ autoHide: true, hasClosed: true })
}, 5000)
}
}
render() {
const { error, info, success, warning, text } = this.props
const classNames = {
'error': error,
'info': info,
'success': success,
'warning': warning,
'alert-hidden': this.state.autoHide
}
return (
<div className={classnames("alert-message", classNames)}>
{text}
</div>
)
}
}
export default AlertMessage
现在,我想删除 setTimeout 和状态,使其成为功能性无状态组件。我的问题是我的样式中的过渡延迟似乎不起作用,恐怕这与 classNames 如何将类应用于组件有关。
这是我的风格:
.alert-message{
overflow-y: hidden;
opacity: 1;
max-height: 80px;
transition-property: all 450ms;
transition-duration: 450ms;
transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
transition-delay: 5000ms;
谢谢
最佳答案
Toast component BluePrint 框架的一部分使用超时功能处理该问题。您可以从其 source code 中提取出相同的功能
据我所知,目前在react中不能只通过CSS来实现动画。
关于javascript - 在 react 组件中动画淡出元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47281706/