8

我正在尝试找到一种根据 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>
        );
    }
});

我想知道您将如何工作才能在组件卸载之前制作动画。

4

1 回答 1

6

ReactCSSTransitionGroup只是ReactTransitionGroup调用componentWillEnter, componentDidEnter, componentWillLeave, 和componentDidLeave基于您定义的 CSS 的专用版本。

如果您不想使用 CSS 动画，您可以简单地使用和使用一个组件，该组件使用基于 RAF 的动画ReactTransitionGroup实现这些生命周期钩子：

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

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

于 2014-11-17T17:49:46.710 回答