0

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;
}
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 に答える