Реагировать на CSS-переходы

Question

Я изучаю React CSS Transitions. Поэтому я решил сделать скользящую боковую панель навигации. Боковая панель скользит справа просто отлично. Но я не могу заставить анимацию работать. Я не уверен, что происходит.

JSX:

render: function() {
return(
  <div className="_Sidebar">
    <div className="top">
      <i
        className="menuIcon fa fa-bars"
        onClick={() => this.handleClick()}>
      </i>
      <UserName />
    </div>
    {this.state.show ?
      <ReactCSSTransitionGroup
        transitionName="example"
        transitionAppear={true}
        transitionLeave={true} >
        <div key={"slidebar"} className="sidebar">
          {this.handleItems()}
        </div>
      </ReactCSSTransitionGroup>
      : null}
    </div>
  );
}

И CSS

.example-appear {
 left: -230px;
 transition: left .9s ease-in;
}

.example-appear.example-appear-active {
 left: 0px;
}

.example-leave {
 left: 0px;
 transition: left .9s ease-out;
}

.example-leave.example-leave-active {
 left: -230px;
}

Answer 1

На самом деле я пробовал в вашем коде есть что-то неправильное в том, чтобы поставить тег ReactCSSTransitionGroup, поэтому я прикрепил свой код, он проснулся правильно, вы можете использовать его напрямую и поместить ваши данные,

 import React from 'react';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';

var Test = React.createClass({
    getInitialState: function () {
        return {  active: true };
    },
    onToggle: function () {
        this.setState({active: !this.state.active});
    },

render: function() {
    return (
        <div>
            <ReactCSSTransitionGroup
                transitionName="fade"
                transitionEnterTimeout={500}
                transitionLeaveTimeout={300}>

                {!this.state.active && (   <h2> Test Asmaa Almadhoun </h2>)}
            </ReactCSSTransitionGroup>
            <div className="chatBTN" onClick={this.onToggle}>
                <img src="../src/contents/images/svg/chat.svg"/>
            </div>
        </div>

    );
}
});

export default Test;

---

Файл CSS

.chatBar{
  position: fixed;
  height: 320px;
  z-index: 0;
  right: 0;
  top: 40px;
  width: 150px;
  text-align: center;
  display: block;
  transform: translateY(-40px);
}
.fade-enter {
  transform: translateY(-88%);
}

.fade-enter-active {
  top: 0;
 transform:translateY(-40px);
  transition: .5s ease-in all;
}

.fade-leave {
  transform: translateY(-40px);
}

.fade-leave-active {
  transform: translateY(-88%);
  transition: 0.3s ease-out all;
}