React生命周期动画

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.comjebumipimo1edit?html,console,output