反应生命周期动画

Question

我正在尝试根据ReactElement的生命周期找到一种执行动画的方法,在组件刚刚安装时动画很容易,但是在组件卸载之前我会做另一个动画.

我不能真正使用ReactCSSTransitionGroup,因为它不会使用RequestAnimationFrame.

只是为了描述我的情况,我的组件是侧边栏,我可以根据一些用户的输入切换开/关.

var Sidebar = React.createClass({
    componentDidMount: function() {
        var menuUfeWidth = $('.menu-ufe').width();
        $(this.getDOMNode()).transition({x: menuUfeWidth}, Utils.animationDuration * 2, 'snap');
    },
    render: function() {
        return (
            <div className={'leaflet-sidebar left'}>
                <div className={'ufe-content'} />
            </div>
        );
    }
});

我想知道如何在组件卸载之前完成动画.

Answer 1

ReactCSSTransitionGroup只是一个特殊版本ReactTransitionGroup的呼叫componentWillEnter,componentDidEnter,componentWillLeave,并componentDidLeave根据您定义的CSS.

如果您不想使用CSS动画,则可以使用ReactTransitionGroup和使用使用基于RAF的动画实现这些生命周期钩子的组件:

<ReactTransitionGroup component="div>
  <MyCustomReactTransitionComponent key={...} />
</ReactTransitionGroup>

这是我从另一篇SO帖子中找到的一个例子:http://jsbin.com/jebumipimo/1/edit？html,console,output