反应 CSS 过渡答案

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> ); }

.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; }

【解决方案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;
}

【讨论】：