反応コンポーネントのフェードアウト要素のアニメーション

Question

反応コンポーネントにフェードアウト警告/エラーメッセージ（ブートストラップスタイル）を作成していますが、フェードアウトタイミングに問題があります。フェードアウトマイ

は、これまで正常に動作しますが、これはそれが今行うの方法です：

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; 

おかげ

Answer 1

Toast componentはタイムアウト機能を持つことを処理します。 source code

私が知る限り、あなたは現時点では反応のCSSを使ってアニメーションを達成することはできません。