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

当用户单击DOM元素时，我想让react组件翻转过来。我看到了一些关于他们的动画混合的文档，但它看起来是为“进入”和“离开”事件设置的。响应某些用户输入并在动画开始和完成时收到通知的最佳方式是什么？目前，我有一个列表项，我希望它翻过来显示一些按钮，如删除，编辑，保存。也许我在文件里遗漏了什么

动画混音

---

我从未使用过

React

，但如果它使用

CSS3动画/转换

，您可能可以执行以下操作：

 element.addEventListener( 'webkitTransitionEnd', function( event ) { 

   console.log( 'Complete');

 }, false );

---

我在我的react-hammer集成中成功地使用了此功能。这里有一些hammer事件和react动画的示例。

单击后，您可以更新状态，添加一个类并记录

animationend

事件

class ClickMe extends React.Component {
  constructor(props) {
    super(props)
    this.state = { fade: false }
  }
  render() {
    const fade = this.state.fade

    return (
      <button
        ref='button'
        onClick={() => this.setState({ fade: true })}
        onAnimationEnd={() => this.setState({ fade: false })}
        className={fade ? 'fade' : ''}>
        Click me!
      </button>
    )
  }
}

类ClickMe扩展React.Component{
建造师（道具）{
超级（道具）
this.state={fade:false}
}
render（）{
const fade=this.state.fade
返回(
this.setState（{fade:true}）
onAnimationEnd={（）=>this.setState（{fade:false}）}
className={fade？'fade'：''}>
点击我！
)
}
}

参见plnkr：

---

编辑：更新以反映当前React，它支持animationend事件。

React使用合成事件，其中包括动画事件。在此处找到文档：。我更新了以下已接受的答案：

class ClickMe extends React.Component {
  state = {fade: false};

  render () {
    const {fade} = this.state;

    return (
      <button
        onClick={() => this.setState({fade: true})}
        onAnimationEnd={() => this.setState({fade: false})}
        className={fade ? 'fade' : ''}>
          Click me!
      </button>
    )
  }
}

类ClickMe扩展React.Component{
状态={fade:false}；
渲染（）{
const{fade}=this.state；
返回(
this.setState（{fade:true}）
onAnimationEnd={（）=>this.setState（{fade:false}）}
className={fade？'fade'：''}>
点击我！
)
}
}

以下是使用纯Reactjs事件的答案，无需任何jQuery、其他LIB、注册或sms:）

关键点是提供动画关键帧名称作为函数参数

CSS JS

const modal=（{
伊肖恩，我装好了，
启动卸载，卸载
}) => {
常数cssClasses=[
“模态”，
道具显示？“ModalOpen”：“ModalClosed”
];
返回(
{isMounted&&
{event.animationName==“closeModal”&&unmountAction}
}>
情态动词
解雇
}
);
};

我遇到的最流行、最易于使用的软件包：

安装：

npm install react-transition-group

用法：

import { CSSTransition } from 'react-transition-group';

<CSSTransition
  in={toShow} // boolean value passed via state/props to either mount or unmount this component
  timeout={300}
  classNames='my-element' // IMP!
  unmountOnExit
>
  <ComponentToBeAnimated />
</CSSTransition>

---

我认为如果不使用可怕的jQuery动画来捕捉javascript的开始/结束，就没有办法做到这一点。如果您不反对使用这些动画，那么它们将起作用。。。只是不太好：P@mike-截至2016年，这是不正确的。jQuery可以工作，但不是必需的。请看我的答案。@MikeDriver一般来说，在jQuery中完成的任何事情都可以不用jQuery完成，它是基于javascript构建的，因此jQuery可以访问与javascriptReact使用虚拟DOM相同的API:s。我希望在React中有一种内置的方法，这样我就不必直接摆弄DOM。如果要为用户看到的东西设置动画，就必须触摸DOM。没有办法。如何传递动画的名称，因为我有“淡入”和“淡出”动画。我想在“淡出”动画结束后运行func。那么，我应该把动画名称

onAnimationEnd={（）=>this.setState（{fade:false}}}

放在哪里呢？我建议使用jquery的这些答案不合适，因为react有自己的方式来处理事件。对于像我这样仍然陷入困境的人来说。也许您正在使用transition，而需要使用onTransitionEnd。

npm install react-transition-group

import { CSSTransition } from 'react-transition-group';

<CSSTransition
  in={toShow} // boolean value passed via state/props to either mount or unmount this component
  timeout={300}
  classNames='my-element' // IMP!
  unmountOnExit
>
  <ComponentToBeAnimated />
</CSSTransition>

.my-element-enter {
  opacity: 0;
  transform: scale(0.9);
}
.my-element-enter-active {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 300ms, transform 300ms;
}
.my-element-exit {
  opacity: 1;
}
.my-element-exit-active {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 300ms, transform 300ms;
}