在反应组件中为淡出元素设置动画

Posted 2023-03-16

【中文标题】在反应组件中为淡出元素设置动画

【英文标题】：Animating a fade out element in a react component

【发布时间】：2018-04-27 03:51:48

【问题描述】：

我正在反应组件中创建淡出警告/错误消息（引导样式），并且我在淡出时间方面遇到了一些问题。

到目前为止，我的淡出效果很好，现在就是这样：

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 和状态，使其成为功能性无状态组件。我的问题是我的风格中的transition-delay似乎不起作用，我担心它与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;

谢谢

【问题讨论】：

使用 css 动画和组件生命周期不是一个好的模式。我强烈推荐github.com/reactjs/react-transition-group

【参考方案1】：

Toast component BluePrint 框架使用超时功能处理该问题。你可以从它的source code中提取出同样的功能

据我所知，目前仅通过 CSS in react 是无法实现动画的。