動畫組件在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列表的方法。 呈現CategoriesList組件時，如何為容器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進行動畫處理。

Answer 2

您可以使用React生命周期和基本CSS輕松完成此任務。

CSS：

.container {
    opacity: 0;
    transition: 200ms opacity ease-in-out;
}

反應：

  class CategoriesList extends Component{ 
  ...
  componentDidMount() {
    this.refs.container.style.opacity = 1;
  }
  ...
  render(){
    return (
      <div className= 'container' ref="container">
        {this.renderList()}
      </div>
      )
   }}

React生命周期就是神奇的地方。 查看文檔以了解更多信息。 還請注意ref屬性用於訪問容器div節點的用法。 您也可以執行很多操作，但是請確保僅在渲染組件后嘗試此操作。