animation - 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 并使用实现 these lifecycle hooks 的组件使用基于 RAF 的动画:

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

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