javascript - ReactJS 中动画组件进入 DOM

Question

作为 React 新手，我很难理解如何在 React 中为元素设置动画。有没有一种简单的方法可以在不使用react-transition-group的情况下做到这一点？假设我有这个代码:

class CategoriesList extends Component{ 
  renderList(){
     return this.props.categories.map((category) => {
       return(
         <div
           key={category.title}
           className="button">
           {category.title}
         </div>
       )
     })
   }               
  render(){
    return (
      <div className= 'container'>
        {this.renderList()}
      </div>
      )
   }}

其中 renderList() 是一个根据 props 渲染一些 div 列表的方法。当呈现 CategoryList 组件时，如何使容器 div 淡入动画？

Answer 1

看看这个

class Example extends React.Component {
  componentDidMount () {
    
    dynamics.animate(this.refs.a, {
      translateX: 150,
      opacity: 1
    }, {
      type: dynamics.spring,
      frequency: 200,
      friction: 200,
      duration: 1500
    })
  }

  render () {
    return (
      <div ref="a" style={{
        padding: 10,
        background: 'tomato',
        color: 'white',
        width: 200,
        fontFamily: 'Helvetica'
      }}>
        Animating Div
      </div>
    )
  }
}



ReactDOM.render(<Example />, document.querySelector('#root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dynamics.js/1.1.5/dynamics.min.js"></script>

<div id="root"></div>

我在这里使用dynamics.js来制作动画。