如何在 react js 中重新运行 css3 动画

IT技术 javascript css reactjs
2021-05-01 01:59:17

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

有什么建议吗？

2个回答

正如我也回答了您之前的问题，它是相同的，请尝试处理状态更改。由于您toggle button在上一个问题中提到您使用的是 a ，因此我使用了类似的方法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>

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

看到这个：

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

其它你可能感兴趣的问题
上一篇有什么办法可以将 3 毫米的细丝收缩到 2.85 毫米？ 下一篇“初级3D打印机”是什么意思？