reactjs動畫 - 使用CSS只轉換

Question

有人可以指出一個簡單的例子，使用CSS轉換沒有其他庫在reactjs動畫圖像從負面到正面右/左位置組件加載？

Answer 1

這裏是你在找什麼

.example-enter { 
    opacity: 0.01; 
    position: relative; 
    left: -100px 
} 

.example-enter.example-enter-active { 
    opacity: 1; 
    position: relative; 
    left: 0; 
    transition: all 1s ease-in; 
} 

組件

class Container extends React.Component { 

    constructor(props) { 
    super(props); 
    this.state = { 
     items: [0], 
     counter: 0 
    }; 
    this.handleAdd = this.handleAdd.bind(this); 
    } 
    handleAdd(){ 
    const counter = this.state.counter + 1, 
     items = this.state.items.concat([counter]); 

    this.setState({ 
     counter,items 
    }) 
    } 
    render(){ 
    const items = this.state.items.map(item => { 
     return <li className='example' key={item}>{item}</li> 
    }) 
    return <ul className='container'> 
       <ReactCSSTransitionGroup 
      transitionName="example" 
      transitionEnterTimeout={500} 
      transitionLeaveTimeout={300}> 
      {items} 
     </ReactCSSTransitionGroup> 
     <hr/> 
     <button onClick={this.handleAdd}>New One</button> 
    </ul> 
    } 


} 
React.render(<Container />, document.getElementById('container')); 

而且還鏈接到>>React Animation &工作fiddle

感謝