Question

我点击它时使用CSS transform为AwesomeFont图标设置动画

.animate {
    -webkit-animation-duration: 400ms;
    -webkit-animation-name: animation
}

AFAIK，用于触发动画我需要在渲染元素后将其添加到元素中。所以我在React

中这样做

class Class extends Component {
  state = {
    likes: 5,
    play: false
  }

  handleClick = () => {
    this.setState((p) => { return {play: p.play ? false : true}; })
  }

  render() {
    <a onClick={this.handleClick} href="#" />
      <Icon className={this.state.play ? 'animate' : ''} name="thumbs-up" />
      {this.state.likes}
    </a>
  }
}

如果我只是每次点击切换状态，那么效果很好，但现在我想在每次点击时触发动画

...

  handleClick = () => {
    this.setState((p) => { return {play: p.play ? false : true}; })
  }

  render() {
    <a onClick={this.handleClick} onMouseUp={() => this.setState(()=>{return {play:false}; })} href="#" />
      <Icon className={this.state.play ? 'animate' : ''} name="thumbs-up" />
      {this.state.likes}
    </a>
  }
}

它并不漂亮，但我只是想说明一点，我认为它不能正常工作，因为反复点击链接的数字部分不会触发动画而是点击{{1确实。

我尝试添加类Icon并将其删除onMouseDown但是React只是批量编辑onMouseUp，结果什么都没有。有任何想法的人我应该如何处理这个问题？

Answer 1

请尝试将标记更改为div标记。点击和其他鼠标事件在div及其子元素上运行良好。查看示例：

<div id='wrapper' onClick='wrapperClick()' onMouseUp='wrapperMouseUp()'>
  This is parent
  <div id='child'>
    I am child
  </div>
</div>


#wrapper {
  width:100px;
  height:100px;
  border:1px solid black;
}

#child {
  padding-top:10px;
  border:1px solid red;
}

function wrapperClick() {
  alert('you clicked me')
}

function wrapperMouseUp() {
  alert('Mouse Up')
}

请注意，点击事件之前鼠标会激活。

handleMouseUp = () => {
  setCounter()
}
handleClick = () => {
  setCounter()
}

setCounter() {
  this.setState((p) => { return {play: p.play ? false : true}; })
}

  render() {
    <div onClick={this.handleClick} onMouseUp={this.handleMouseUp} href="#" />
      <Icon className={this.state.play ? 'animate' : ''} name="thumbs-up" />
      {this.state.likes}
    </div>
  }
}

在React中添加/重新启动CSS动画onClick后删除类

1 个答案: