react：渲染組件時的淡入/滑入動畫

Question

我是 React 的新手。 我制作了一個帶有按鈕和圖像網址列表的小應用程序。 單擊按鈕時，圖像 url 將添加到列表中。 我使用標准的.map函數呈現圖像 url 列表。

我想在顯示圖像時制作一個快速的ui動畫效果：從左側淡入和滑入的組合。 我嘗試了 Velocity.js 並找到了 Velocity velocity-react包裝器。 但我不明白如何使用它。 “標准” velocity-animate庫也是如此。

什么是最好的？ velocity-react ， velocity-animate或其他什么？ 我該怎么做？

JSX

<div className="row">
  {
    this.state.images.map( (image, index) => { return this.renderThumb(image, index); } )
  }
</div>

渲染拇指函數

renderThumb(image, index) {
  return (
    <div ref="tweetImage" key={`image-${index}`} className="col-xs-3 tweetImage">
      <img className="img-thumbnail" src={image} alt="my pic"/>
    </div>
  );
}

速度反應

我試圖像這樣將<img>動畫不透明度從 0 包裝到 1（從文檔中復制）：

<VelocityComponent animation={{ opacity: 1 }} duration={ 500 }>
  <img className="img-thumbnail" src={image} alt="my pic"/>
</VelocityComponent

我不斷收到此錯誤：

警告：React.createElement：類型無效——需要一個字符串（對於內置組件）或一個類/函數（對於復合組件）但得到：對象

---

ReactCSSTransitionGroup也不走運（如下面的建議）。 顯示圖像但沒有動畫：

renderThumb(image, index) {
  return (
    <div ref="tweetImage" key={`image-${index}`} className="col-xs-3">
      <ReactCSSTransitionGroup
        transitionName="example">
          <img className="img-thumbnail" src={image} alt="Ole Frank Jensen"/>
      </ReactCSSTransitionGroup>
    </div>
  );
}

---

解決了：

我將<ReactCSSTransitionGroup transitionName="example">移到了衰落組件之外，瞧 :-)

使成為（）

<div className="row">
  <ReactCSSTransitionGroup transitionName="example">
    {
      this.state.images.map( (image, index) => { return this.renderThumb(image, index); } )
    }
  </ReactCSSTransitionGroup>
</div>

渲染拇指（）

renderThumb(image, index) {
  return (
    <div key={`image-${index}`} className="col-xs-3">
      <img className="img-thumbnail" src={image} alt="Ole Frank Jensen"/>
    </div>
  );
}

Answer 1

你可以使用 react 提供的 CSSTransitionGroup。

https://facebook.github.io/react/docs/animation.html

來自文檔的一個簡單的待辦事項示例

class TodoList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {items: ['hello', 'world', 'click', 'me']};
    this.handleAdd = this.handleAdd.bind(this);
  }

  handleAdd() {
    const newItems = this.state.items.concat([
      prompt('Enter some text')
    ]);
    this.setState({items: newItems});
  }

  handleRemove(i) {
    let newItems = this.state.items.slice();
    newItems.splice(i, 1);
    this.setState({items: newItems});
  }

  render() {
    const items = this.state.items.map((item, i) => (
      <div key={item} onClick={() => this.handleRemove(i)}>
        {item}
      </div>
    ));

    return (
      <div>
        <button onClick={this.handleAdd}>Add Item</button>
        <ReactCSSTransitionGroup
          transitionName="example"
          transitionEnterTimeout={500}
          transitionLeaveTimeout={300}>
          {items}
        </ReactCSSTransitionGroup>
      </div>
    );
  }
}

Answer 2

我建議使用React CSS Transition Group模塊。 它為簡單動畫提供了高級動畫包裝器。

---

編輯：

該鏈接將永久重定向到動畫附加組件

ReactTransitionGroup和ReactCSSTransitionGroup已移至社區維護的react-transition-group包中。

---

從文檔

 .example-enter {
  opacity: 0.01;
}

.example-enter.example-enter-active {
  opacity: 1;
  transition: opacity 500ms ease-in;
}

.example-leave {
  opacity: 1;
}

.example-leave.example-leave-active {
  opacity: 0.01;
  transition: opacity 300ms ease-in;
}

其中example將是您希望繪制的組件的 transitionName。 和-enter,enter-active,-leave,-leave-active代表動畫周期的相應滴答聲。 這些將由 React 在內部作為類名添加到項目中。

您可以使用它們來達到所需的效果。 這里有一個小演示。

PS：不確定這是否優於 Velocity.js，還沒有使用過。