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

  • Z时代
  • 2024-01-10
  • 分类：问答

我需要在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以外是否还有其他选择。

有什么建议吗？

回答：

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

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>

以上是 如何在React JS中重新运行CSS3动画 的全部内容， 来源链接： utcz.com/qa/398712.html

回到顶部