ReactJS: TOGLLE CSS przejścia

Question

trzeba włączać klasy css po składnik (lub nawet na stronie) jest całkowicie świadczonych, tak że odpowiednie właściwości animacji na stronie obciążenia.

Jak mam to zrobić, najlepiej bez jQuery?

Gdybym przełącz Klasa A komponentu w componentDidMount, animacja rzeczywistości nie stało.

Answer 1

nie zrobił rzeczywiście dostać część gdzie słownie:

po składnik (lub nawet strony) jest całkowicie oddane, tak że istotne właściwości są animowane na stronie obciążenia.

Kiedy dokładnie chcesz animować element? Jeśli określisz nazwę klasy w funkcji render(), komponent zostanie wyrenderowany z animacją przy ładowaniu strony.

Jeśli chcesz kontrolować/animacja przełączania po raz pierwszy render, można kontrolować stan nazwę klasy przy użyciu komponentu tak:

var Hello = React.createClass({ 

    getInitialState: function(){ 
     return { 
      condition:false 
     } 
    }, 

    handleClick :function(){ 
     this.setState({ condition : !this.state.condition }); 
    }, 

    render: function() { 
     return <div> 
       <div className={this.state.condition ? "animated" :""} >Hello {this.props.name}</div> 
       <button type="button" onClick={this.handleClick}>Change Condition</button> 

       </div>; 
    } 
}); 

React.render(<Hello name="World" />, document.body); 

Tu zmienił stan w odpowiedzi na kliknięcia przycisku. Prawdopodobnie możesz zmienić to na inne wydarzenie, które lubisz.

Oto skrzypce dla powyższego kodu: http://jsfiddle.net/f0j4kt0L/

Answer 2

Można to zrobić przy użyciu klasy przełączania również.

var node = ReactDOM.findDOMNode(this.refs.el); 
node.classList.toggle('menu-open');