reactjs 动画 - 仅使用 CSS 过渡答案

【问题标题】：reactjs animations - using CSS only transitionsreactjs 动画 - 仅使用 CSS 过渡
【发布时间】：2016-11-23 08:29:15
【问题描述】：

有人能指出一个简单的例子吗？使用 CSS 转换，没有其他库在 reactjs 中将图像从负向/正向的右/左位置加载到组件加载？

【问题讨论】：

标签： css reactjs css-transitions react-jsx

【解决方案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

谢谢

【讨论】：