reactjsを使用してスライド式サイドバーを作成する方法

Question

reactjsを使用してスライド式サイドバーを作成しようとしています。しかし、何らかの理由でそれは起こっていません。私が書いたコードは以下の通りです。

Sidebar.js

import React, { Component } from 'react'; 

class Sidebar extends Component { 
    render() { 
    return (
     <div id="sidebar-wrapper"> 
     <ul className="sidebar-nav"> 
      <li className="sidebar-brand"> 
      <a href="#">Start Bootstrap</a> 
      </li> 
      <li> 
      <a href="#">Dashboard</a> 
      </li> 
      <li> 
      <a href="#">Shortcuts</a> 
      </li> 
      <li> 
      <a href="#">Overview</a> 
      </li> 
      <li> 
      <a href="#">Events</a> 
      </li> 
      <li> 
      <a href="#">About</a> 
      </li> 
      <li> 
      <a href="#">Services</a> 
      </li> 
      <li> 
      <a href="#">Contact</a> 
      </li> 
     </ul> 
     </div> 
    ); 
    } 
} 

export default Sidebar; 

app.js

import React, { Component } from 'react'; 
import Sidebar from './Components/Sidebar/Sidebar' 

class App extends Component { 
    constructor() { 
    super(); 
    this.state = { 
     showResults: true 
    } 
    this.handleSlide = this.handleSlide.bind(this); 
    } 
    handleSlide() { 
    this.setState({ showResults: !this.state.showResults }) 
    } 

    render() { 
    return (
     <div id="wrapper" className="toggled"> 
     {this.state.showResults ? <Sidebar /> : null} 
     <div id="page-content-wrapper"> 
      <div className="container-fluid"> 
      <button onClick={this.handleSlide}> 
       {this.state.open ? 'Close' : 'Open'} 
      </button> 
      </div> 
     </div> 
     </div> 
    ); 
    } 
} 

export default App; 

このコードのみ状態を切り替え、私は表示またはサイドバーのDIVを隠し、それによって。しかし、これでスライド可能なdivを作成することは可能ですか？そして、私はインターネット上で利用可能なプラグインを使用したくない。だから誰かがこれで私を助けることができます。

Answer 1

あなたが反応-アドオン-CSS-遷移基 NPMモジュールに見出すことができるReactCSSTransitionGroupを使用することができます。

このようにそれを使用します。

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

class MyComponent extends Component { 

    render() { 
     <ReactCSSTransitionGroup 
     transitionName="slider" 
     transitionEnterTimeout={1000} 
     transitionLeaveTimeout={1000} 
     > 
      {(this.state.showResults)?<Sidebar />:null} 
     </ReactCSSTransitionGroup> 
    } 
} 

次に、あなたのCSSに：

.slider-enter { 
    opacity: 0.01; 
    transition: opacity 500ms ease-in; 
} 

.slider-leave { 
    opacity: 0.01; 
    transition: opacity 500ms ease-in; 
} 

あなたが最初にCSSを使って、サイドバーコンポーネントを非表示にすることができますReactCSSTransition here

Answer 2

についての詳細を読み、クリックするとアニメーションが表示されます。私はデモを作成しましたhere。