0

我是新手，我在我的项目中添加了 react-transition-group 以添加动画影响页面之间的过渡。我的 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);}
}

我错过了什么？对此问题的任何见解将不胜感激。

4

0 回答 0