Question

新的反应一般来说，我正在尝试使用ReactCSSTransitionGroup为导航栏设置动画但看不到动画，而是出现了导航栏中的小延迟。我无法弄清楚我错过了什么。也在这个项目中使用：react-router和css-modules。 感谢您的时间和精力！

Header.jsx：

import React from 'react';
import styles from './styles.scss';
import cssModules from 'react-css-modules';

import Nav from '../Nav/Nav';

import ReactCSSTransitionGroup from 'react-addons-css-transition-group';

const Header = React.createClass({
  getInitialState: function() {
    return {
      isShowing: false
    };
  },
  toggleNavigation: function() {
    if (this.state.isShowing === true) {
      this.setState({isShowing: false});
    }
    if (this.state.isShowing === false) {
      this.setState({isShowing: true});
    }
  },
  render: function() {
    return (
      <div className={styles.header}>
        <span className={styles.headerLogo}>לוגו</span>
        <button className={styles.toggleNav} onClick={this.toggleNavigation}>&#9776;</button>
        <ReactCSSTransitionGroup
          transitionName="slide"
          transitionEnterTimeout={1000}
          transitionLeaveTimeout={1000}
          transitionAppear={true}
          transitionAppearTimeout={1000}>
          {
            this.state.isShowing ? <Nav className={this.state.className}/> : null
          }
        </ReactCSSTransitionGroup>
      </div>
    );
  }
});

export default cssModules(Header, styles, {allowMultiple: true});

Nav.jsx：

import React from 'react';
import styles from './styles.scss';
import cssModules from 'react-css-modules';
import {Link, IndexLink} from 'react-router';

const Nav = React.createClass({
  render: function() {
    return (
      <div className={styles.nav}>
        <ul>
          <li>
            <IndexLink to="/">בית</IndexLink>
          </li>
          <li>
            <Link to="/">לינק</Link>
          </li>
          <li>
            <Link to="/">לינק</Link>
          </li>
          <li>
            <Link to="/">לינק</Link>
          </li>
        </ul>
      </div>
    );
  }
});

export default cssModules(Nav, styles, {allowMultiple: true});

styles.scss（导航）：

.nav {
  margin-top: 11px;;
  background-color: lightblue;
  height: auto;
  position: fixed;
  width: 100%;
  z-index: 1000;
  ul {
    height: 100%;
    li {
      list-style: none;
      height: 100%;

      a {
        text-decoration: none;
        height: 100%;
      }
    }
  }
}

.slide-enter {
 height: 0;
 transition: height 1000ms ease-out;
}

.slide-enter-active {
  height: 500px;
  transition: height 1000ms ease-in-out;
}

.slide-leave {
 height: 500px;
}

.slide-leave-active {
  height: 0;
  transition: height 300ms ease-in-out;
}

ReactCSSTransitionGroup不显示动画

0 个答案: