アニメーションの逆のクラスを動的に追加するに反応します

Question

フルコード：

モーダルボタンをクリックしてアニメートします。しかし、私はそれを閉じるときにcomponents/Modal/index.cssでアニメーションを反転させたいと思っています。フェードアウトするモーダル時間を与えるためにsetTimeoutを実装しましたが、動作しません。それはどうすればうまくいくのですか？

モーダル/ index.js：

import React from 'react'; 
 
import Question from './Question'; 
 
import Loading from './Loading'; 
 
import Success from './Success'; 
 
import './index.css'; 
 

 
class Modal extends React.Component { 
 
    constructor(props) { 
 
    super(props); 
 

 
    this.state = { 
 
     loading: false, 
 
     success: false, 
 
     reverse: false, 
 
    }; 
 
    } 
 
    removeUser =() => { 
 
    this.setState({ loading: true }); 
 
    // simulate async loading action 
 
    setTimeout(
 
    () => 
 
     this.setState({ 
 
      loading: false, 
 
      success: true, 
 
     }), 
 
     2000, 
 
    ); 
 
    //simulate promise (function above then this below) 
 
    setTimeout(() => this.props.removeUser(this.props.data), 2001); 
 
    }; 
 
    closeModal =() => { 
 
    this.setState({ reverse: true }); 
 
    setTimeout(() => { 
 
     this.props.closeModal(); 
 
     this.setState({ 
 
     reverse: false, 
 
     success: false, 
 
     }); 
 
    }, 3000); 
 
    }; 
 
    render() { 
 
    const { id, name } = this.props.data; 
 
    const { loading, success } = this.state; 
 
    // The gray background 
 
    const backdropStyle = { 
 
     position: 'fixed', 
 
     top: 0, 
 
     bottom: 0, 
 
     left: 0, 
 
     right: 0, 
 
     backgroundColor: 'rgba(0,0,0,0.3)', 
 
     padding: 50, 
 
    }; 
 

 
    // The modal "window" 
 
    const modalStyle = { 
 
     backgroundColor: '#fff', 
 
     textAlign: 'center', 
 
     borderRadius: 3, 
 
     maxWidth: 360, 
 
     minHeight: 130, 
 
     margin: '0 auto', 
 
    }; 
 

 
    if (this.props.displayModal) { 
 
     return (
 
     <div className={'backdrop ' + (this.state.reverse ? 'reverse' : '')} style={backdropStyle}> 
 
      <div className={'modal ' + (this.state.reverse ? 'reverse' : '')} style={modalStyle}> 
 
      {!loading && 
 
       !success && (
 
       <Question 
 
        id={id} 
 
        name={name} 
 
        removeUser={this.removeUser} 
 
        closeModal={this.closeModal} 
 
       /> 
 
      )} 
 
      {loading && !success && <Loading />} 
 
      {!loading && success && <Success closeModal={this.closeModal} />} 
 
      </div> 
 
     </div> 
 
    ); 
 
    } 
 
    return null; 
 
    } 
 
} 
 

 
export default Modal;

モーダル/ index.css：

@keyframes modalFade { 
 
    from { 
 
    transform: translateY(-50%); 
 
    opacity: 0; 
 
    } 
 
    to { 
 
    transform: translateY(0); 
 
    opacity: 1; 
 
    } 
 
} 
 

 
.modal { 
 
    animation-name: modalFade; 
 
    animation-duration: 0.3s; 
 
} 
 

 
@keyframes backdropFade { 
 
    from { 
 
    opacity: 0; 
 
    } 
 
    to { 
 
    opacity: 1; 
 
    } 
 
} 
 

 
.backdrop { 
 
    animation-name: backdropFade; 
 
    animation-duration: 0.3s; 
 
} 
 

 
.reverse { 
 
    animation-direction: reverse; 
 
}

Answer 1

私はいくつかの変更を加えましたあなたのコードと、私はテストしました、それは正常に動作しています。

CSSファイルでは、逆方向モードの新しいアニメーションを追加して、他のアニメーションが正常に方向付けられていることを確認しました。 最後のフレームでアニメーションをフリーズするために、animation-fill-mode: forwards;プロパティも追加しました。

jsxファイルでは、アニメーションの継続時間0.3秒に合わせてタイムアウトを3000から300msに変更しました。

私はhttps://codesandbox.io/s/5wlooq88xlに訂正しました。

closeModal =() => { 
 
    this.setState({ reverse: true }); 
 
    setTimeout(() => { 
 
     this.props.closeModal(); 
 
     this.setState({ 
 
     reverse: false, 
 
     success: false, 
 
     }); 
 
    }, 300); 
 
    };

@keyframes modalFade { 
 
    from { 
 
    transform: translateY(-50%); 
 
    opacity: 0; 
 
    } 
 
    to { 
 
    transform: translateY(0); 
 
    opacity: 1; 
 
    } 
 
} 
 

 
@keyframes modalFadeReverse { 
 
    from { 
 
    transform: translateY(0); 
 
    opacity: 1; 
 
    } 
 
    to { 
 
    transform: translateY(-50%); 
 
    opacity: 0; 
 
    } 
 
} 
 

 
.modal { 
 
    animation-name: modalFade; 
 
    animation-duration: 0.3s; 
 
    animation-fill-mode: forwards; 
 
} 
 
.modal.reverse { 
 
    animation-name: modalFadeReverse; 
 
} 
 

 
@keyframes backdropFade { 
 
    from { 
 
    opacity: 0; 
 
    } 
 
    to { 
 
    opacity: 1; 
 
    } 
 
} 
 

 
@keyframes backdropFadeReverse { 
 
    from { 
 
    opacity: 1; 
 
    } 
 
    to { 
 
    opacity: 0; 
 
    } 
 
} 
 

 
.backdrop { 
 
    animation-name: backdropFade; 
 
    animation-duration: 0.3s; 
 
    animation-fill-mode: forwards; 
 
} 
 
.backdrop.reverse { 
 
    animation-name: backdropFadeReverse; 
 
}