React Transition Group - CSSTransition не будет отображаться - PullRequest
Новая
       37

React Transition Group - CSSTransition не будет отображаться

0 голосов
/ 11 сентября 2018

Я новичок в реагировании, и я добавил в свой проект реагирующая группа, чтобы добавить эффект анимации при переходе между страницами. Мой CSSTransition не рендерится, и я не уверен, как решить эту проблему.

Вот мой код: 

var React = require('react');
var {Link} = require('react-router');

import { CSSTransition, TransitionGroup, } from 'react-transition-group';
import mainLogo from '../assets/main-logo.png';

var Intro = React.createClass({
  render: function () {
   return (
      <CSSTransition
          // in={state === 'entered'}
          timeout={500}
          classNames="cd-intro resolutionLoad">
          <div>
            <div className="cd-login center">
              <p className="main-title">Welcome to</p>
              <img className="main-ACBGC-logo" src={'http://nightowlmedia.co/images/ACBGC-logo.png'} alt="ACBGC Logo" />
              <img className="main-logo" src={mainLogo} alt="Feed AC Logo" />
              <p className="main-title">Project</p>
              <p className="main-arrow">&or;</p>
              <Link to="/about" className="enter">ENTER</Link>
            </div>
          </div>
      </CSSTransition>
    )
  }
});

module.exports = Intro;

Мой CSS для перехода между страницами выглядит следующим образом: 

.resolutionLoad-enter {
   opacity: 0;
   animation: slideIn 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.resolutionLoad-leave {
   opacity: 1;
   animation: slideOut 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

@keyframes slideIn {
   0%   {opacity:0;transform:translate3d(0,-50px,0);}
   100% {opacity:1;transform:translate3d(0,0,0);}
}

@keyframes slideOut {
   0%   {opacity:1;transform:translate3d(0,0,0);}
   100% {opacity:0;transform:translate3d(0,-50px,0);}
}

Чего мне не хватает? Любое понимание этого вопроса будет с благодарностью.

...