如何在 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

您应该捕获动画的结尾并更改其中的状态。

看到这个：

如何对反应.js组件进行动画处理并检测动画的结束