0

我正在学习 React CSS 过渡。所以我决定做一个滑动侧边栏导航。侧边栏从右侧滑入就好了。但我无法让休假动画正常工作。我不确定发生了什么事。

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

1 回答 1

0

真的，我在您的代码中尝试过放置 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;
}
于 2017-07-16T09:00:29.457 回答