ReactJS: Chuyển đổi lớp để chuyển tiếp css

Question

Tôi cần bật/tắt lớp css sau khi thành phần (hoặc thậm chí trang) được hiển thị hoàn toàn để các thuộc tính có liên quan hoạt ảnh khi tải trang.

Làm cách nào để tôi thực hiện việc này, tốt nhất là không có jQuery?

Nếu tôi chuyển đổi lớp của thành phần trong componentDidMount, hoạt ảnh không thực sự xảy ra.

Answer 1

tôi didnt thực sự có được một phần mà bạn nói:

sau khi một thành phần (hoặc thậm chí trang) là hoàn toàn trả lại, vì vậy mà thuộc tính liên quan được hoạt hình trên tải trang.

Khi nào chính xác bạn muốn tạo hiệu ứng cho phần tử? Nếu bạn chỉ định tên lớp trong hàm render(), thành phần sẽ được hiển thị với hoạt ảnh khi tải trang.

Nếu bạn muốn kiểm soát/chuyển đổi hình ảnh động sau khi đã làm, bạn có thể kiểm soát các tên lớp sử dụng trạng thái thành phần như sau:

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

Ở đây tôi đã thay đổi nhà nước để đáp ứng với một nút bấm. Bạn có thể muốn thay đổi điều này thành một số sự kiện khác mà bạn thích.

Đây là một fiddle cho đoạn code trên: http://jsfiddle.net/f0j4kt0L/

Answer 2

Bạn có thể làm điều đó bằng lớp chuyển đổi là tốt.

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