0

new to react generally, i'm trying to use ReactCSSTransitionGroup to animate the navigation bar but see no animation, instead there's a small delay in the navigation bar appearing. i cant figure out what i'm missing. also using in this project: react-router and css-modules. Thank you for your time and effort!

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 (of Nav):

.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;
}
Gonzo
  • 11
  • 4
  • Can you try giving your nav element a key prop? You must provide the key attribute for all children of ReactCSSTransitionGroup, even when only rendering a single item. This is how React will determine which children have entered, left, or stayed. https://facebook.github.io/react/docs/animation.html –  Jan 24 '17 at 18:55
  • thank you for you answer. i have tried – Gonzo Jan 24 '17 at 19:40
  • As long as your navs are unique keys it doesn't matter. Its a way for the add-on to know which elements have entered/left. Can you try removing the transition from slide-enter –  Jan 24 '17 at 20:06

0 Answers0