React.js I'm facing an issue with the React.js code provided below. My goal is to set up the animation before transitioning to a new page using "React-router.Link" and ReactCSSTransitionGroup.
Version: react: '15.2.1' react-addons-css-transition-group: '15.2' react-router: '2.6.0'
I am looking for a way to receive lifecycle events so that I can utilize JavaScript instead of CSS. If you have any insights on the correct approach, please share them with me. Thank you.
For example, I have tried implementing componentWillLeave but it does not seem to trigger.
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>
)
}
});