reactjs 动画 - 仅使用 CSS 过渡

Question

谁能告诉我一个简单的例子，使用 CSS 在 reactjs 中没有其他库将组件负载上的图像从负向正 right/left 位置转换为动画？

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

还有link到>>React Animation & worked fiddle

谢谢

reactjs 动画 - 仅使用 CSS 过渡

reactjs animations - using CSS only transitions

css

css-transitions

reactjs

react-jsx