响应CSS过渡 [英] React CSS Transitions

问题描述

我正在学习React CSS Transitions.因此，我决定进行滑动式侧边栏导航.侧栏从右侧滑入就可以了.但是我不能让休假动画正常工作.我不确定发生了什么.

I'm learning React CSS Transitions. So I decided to make a sliding sidebar navigation. The sidebar slides in from right just fine. But I can't get leave animations working. I'm not sure what's going on.

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

推荐答案

我确实在您的代码中尝试了放置ReactCSSTransitionGroup标记的问题，所以我附加了我的代码，它的唤醒是正确的，您可以直接使用它并放入您的数据，

really I tried in your code there is a thing not right in putting ReactCSSTransitionGroup tag, so I attached my code , its woke correct, you can use it directly and put your data,

 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文件

---

CSS File

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

这篇关于响应CSS过渡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！