React.jsでReactCSSTransitionGroupを用いて、
React-routerのLinkで遷移する前にアニメーションを行いたいです。
ページ遷移する前に、componentWillLeaveで実行したいのですが、
アニメーションを行う時間をsetTimeoutなどを用いても遷移してしまいます。
複雑なアニメーションのため、CSSではなくJSで行いたいので、そのためのイベントを取得したいです。
詳しい方教えていただけますと幸いです。
version
react: '15.2.1'
react-addons-css-transition-group: '15.2'
react-router: '2.6.0'
下記コードではcomponentWillLeaveのイベントは発火しておりませんが、
componentWillLeaveで実行できればと考えております。
よろしくお願いいたします。
React.js
1var React = require("react"); 2var ReactRouter = require("react-router"); 3var CSSTransitionGroup = require('react-addons-css-transition-group'); 4var Link = ReactRouter.Link; 5 6var Test = React.createClass({ 7 componentWillLeave: function(callback) { 8 console.log("component will leave"); 9 $(this.getDOMNode()).hide(duration, callback); 10 }, 11 render: function() { 12 return ( 13 <div id="index"> 14 <CSSTransitionGroup transitionName="example" transitionAppear={true} transitionLeave={true} transitionAppearTimeout={3000} transitionLeaveTimeout={3000}> 15 <Link to="/" key="toIndex">Index</Link> 16 <Link to="contact" key="toContact">Contact</Link> 17 </CSSTransitionGroup> 18 </div> 19 ) 20 } 21});
あなたの回答
tips
プレビュー