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

感谢