如何在react js中重新运行css3动画 [英] How to rerun css3 animations in react js

问题描述

我需要在ajax成功后显示快速闪烁消息几秒钟。消息应在1/2秒后自动隐藏。

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

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

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

我不确定除了css3之外是否还有其他选择。

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

有什么建议吗？

推荐答案

我已经回复了你的上一个问题也是，它一样，尝试处理状态变化。既然你在上一个问题中提到你使用了切换按钮，我使用了类似的复选框这将是对你有帮助。

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>

这篇关于如何在react js中重新运行css3动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！