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

Question

我需要在ajax成功后的几秒钟内显示快速刷新消息。 该消息应在1/2秒后自动隐藏。

由于reactjs不促进dom操作，因此我想使用css3动画实现相同的效果。

这是我准备的简单演示，

当您第一次单击该按钮时，它会显示消息，但是在随后的单击中，它不会执行任何操作。

 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小提琴： http : //jsfiddle.net/2kqv6fo7/9/

我不确定css3以外是否还有其他选择。

有什么建议吗？

Answer 1

正如我也回答了您先前的问题一样，请尝试处理状态更改。 既然您已经提到您在上一个问题中使用了toggle button ，那么我使用了类似的checkbox ，这将对您有所帮助。

我仅在checked切换时才使代码起作用，我认为您也需要在toggle off显示一些消息。 通过在两个类之间切换来执行相同的操作。 并尝试避免内联函数绑定，因为它将为每个渲染触发。 取而代之的是构造函数，该构造函数在加载组件时仅执行一次。

 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

您应该捕获动画的结尾并在那里更改状态。

看到这个：

我该如何为react.js组件onclick设置动画并检测动画的结束