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的专用版本，可根据您定义的CSS调用componentWillEnter，componentDidEnter，componentWillLeave和componentDidLeave

如果您不想使用CSS动画，只需使用ReactTransitionGroup并使用使用基于RAF的动画实现these lifecycle hooks的组件：

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

以下是我从其他SO帖子中找到的一个示例：http://jsbin.com/jebumipimo/1/edit?html,console,output

反应生命周期动画

1 个答案: