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

正如我已经回复了你的previous question，同样，尝试处理状态变化。由于您之前提到过您在上一个问题中使用了toggle button，因此我使用了类似的checkbox，这对您有所帮助。

只有当切换为checked时，我才能使代码生效，我假设您需要在toggle off上显示一些消息。通过在两个类之间切换来做同样的事情。并尝试避免内联函数绑定，因为它将触发每个渲染。而是去构造函数，它将在加载组件时执行一次。

＆＃13;

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')
);

＆＃13;

@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;
}

＆＃13;

<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>

＆＃13;

Answer 2

你应该捕捉动画的结尾并改变那里的状态。

见：

How can I animate a react.js component onclick and detect the end of the animation

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

2 个答案: