javascript - ReactCssTransitionGroup 使用 React-route.Link pageTransition

Question

React.js我对下面的 React.js 代码有疑问。我正在尝试使用“React-router.Link”在页面转换之前设置动画。和 ReactCSSTransitionGroup。

版本 react :'15.2.1'React-addons-css-transition-group: '15.2' react 路由器:'2.6.0'

我想要获取生命周期事件，所以我可以使用 JS 而不是 CSS。如果您知道正确的做法，请告诉我。谢谢。

例如)componentWillLeave 等...

附注我尝试了这段代码，但 componentWillLeave 不火。

var React = require("react");
var ReactRouter = require("react-router");
var CSSTransitionGroup = require('react-addons-css-transition-group');
var Link = ReactRouter.Link;

var Test = React.createClass({
    componentWillLeave: function(callback) {
        console.log("component will leave");
        $(this.getDOMNode()).hide(duration, callback);
    },
    render: function() {
        return (
            <div id="index">
                <CSSTransitionGroup  transitionName="example" transitionAppear={true} transitionLeave={true} transitionAppearTimeout={3000} transitionLeaveTimeout={3000}>
                    <Link to="/" key="toIndex">Index</Link>
                    <Link to="contact" key="toContact">Contact</Link>
                </CSSTransitionGroup>
            </div>
        )
    }
});

Answer 1

我自己解决了这个问题。我不知道 ReactTransitionGroup。谢谢，埃文里昂。