ReactJS: Css geçişi için geçiş yap geçişi

Question

Bir bileşen (veya sayfa bile) tamamen oluşturulduktan sonra bir css sınıfında geçiş yapmam gerekiyor, böylece ilgili özellikler sayfa yükleme sırasında canlandırılıyor.

Bunu yapmayı, tercihen jQuery olmadan nasıl yaparım?

Bir bileşenin sınıfını componentDidMount içinde değiştirirseniz, animasyon aslında gerçekleşmez.

Answer 1

ı did not aslında söylemek kısmını almak: ilgili özellikler sayfa yüklemesinde animasyonlu böylece tamamen oluşturulur

bir bileşenidir (hatta sayfa) sonra.

Öğeyi tam olarak ne zaman canlandırmak istersiniz? Render() işlevinde sınıf adını belirtirseniz, bileşen sayfa yüklendiğinde animasyon ile oluşturulur. İlk işlemek sonra/geçiş animasyonu denetlemek istiyorsanız

, bunu böyle bileşen devlet kullanarak sınıf adını kontrol edebilirsiniz:

İşte

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

Bir düğme tıklaması yanıt olarak devlet değişti. Bunu muhtemelen beğeneceğiniz başka bir etkinliğe değiştirmek isteyebilirsiniz. Siz de geçiş sınıfını kullanarak bunu yapabilirsiniz http://jsfiddle.net/f0j4kt0L/

Answer 2

: Burada

yukarıdaki kodu için bir keman olduğunu.

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