Question

有人可以指出一个简单的例子，使用CSS过渡反应中没有其他库可以在组件加载时从负向右/左位置动画图像吗？

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＆amp;工作fiddle

由于

reactjs动画 - 使用CSS仅转换

1 个答案: