0

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

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

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;

谢谢

4

1 回答 1

0

BluePrint 框架的Toast 组件使用超时功能处理该问题。您可以从其源代码中提取相同的功能

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

于 2017-11-14T10:51:41.467 回答