如何在React JS中重新运行CSS3动画

Question

I need to show a quick flash message for few seconds after ajax success. The message should be auto hidden after 1/2 seconds.

As reactjs does not promote for dom manipulation, I want to achieve the same using css3 animation.

Here is simple demo i prepared,

When you click on the button for the first time it shows the message, but on the subsequent click it does not do anything.

 class Test extends React.Component { state = { show: false } showFlashMessage() { this.setState({ show: true }) } render() { return ( < div > < div className = { `message ${this.state.show ? "fadeOut": ""}` } > Hello < /div> < button id = "but" onClick = { this.showFlashMessage.bind(this) } > Click Me < /button> < /div> ) } } ReactDOM.render( < Test / > , document.getElementById('container') ); 

 @keyframes FadeAnimation { 0% { opacity: 1; visibility: visible; } 100% { opacity: 0; visibility: hidden; } } .fadeOut { animation: FadeAnimation 1s ease-in .4s forwards; } .message { visibility: hidden; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="container"> <!-- This element's contents will be replaced with your component. --> </div> 

JS Fiddle: http://jsfiddle.net/2kqv6fo7/9/

I am not sure if there is any other alternatives except css3 .

Any suggestion?

Answer 1

As I have answered to your previous question also, its the same, try handling with the state change. Since you have mentioned you are using a toggle button in your previous question, i have used a similar checkbox which will be helpful for you.

I ve made the code work only when the toggle is checked , I assume you would need to show some message on toggle off too. Do the same, by toggling between two classes. And try to avoid inline function bindings, cuz it will trigger for every render. Instead go for constructor, which will get executed just once when the component is loaded.

 class Test extends React.Component { constructor() { super(); this.state = { show: false, showClass: undefined } this.showFlashMessage = (event) => this._showFlashMessage(event); } _showFlashMessage(event) { this.setState({ show: !this.state.show, showClass: (!this.state.show ? "fadeOut": "fadeOut2") }) } render() { return ( < div > < div className = { `message ${this.state.showClass}` } > Hello < /div> <button id ="but" onClick = {this.showFlashMessage} > Click Me </button>< /div> ) } } ReactDOM.render( < Test / > , document.getElementById('container') ); 

 @keyframes FadeAnimation { 0% { opacity: 1; visibility: visible; } 100% { opacity: 0; visibility: hidden; } } @keyframes FadeAnimation2 { 0% { opacity: 1; visibility: visible; } 100% { opacity: 0; visibility: hidden; } } .fadeOut { opacity: 1; visibility: visible; animation: FadeAnimation 1s ease-in .2s forwards; } .fadeOut2 { opacity: 1; visibility: visible; animation: FadeAnimation2 1s ease-in .2s forwards; } .message { opacity: 0; visibility: hidden; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="container"> <!-- This element's contents will be replaced with your component. --> </div> 

Answer 2

You should capture the end of the animation and change the state there.

See this:

How can I animate a react.js component onclick and detect the end of the animation