Reactjs 反应：渲染组件时淡入/滑入动画

我是新手。我制作了一个带有按钮和图片URL列表的小应用程序。单击按钮时，图像url将添加到列表中。我使用标准的

.map

函数呈现图像URL列表

我想在显示图像时制作一个快速的ui动画效果：淡入和从左侧滑入的组合。我尝试了Velocity.js，找到了

Velocity-react

包装器。但我不明白如何使用它。这同样适用于“标准”

velocity动画库

什么是最好的<代码>速度反应

，

速度动画

还是其他什么？ 我该怎么做

JSX

---

已解决：

我把

移到了淡入淡出的组件之外，瞧：-）

render（）

{
this.state.images.map（（image，index）=>{返回this.renderThumb（image，index）；}）
}

renderThumb（）

renderThumb（图像，索引）{
返回(
);
}

我建议使用模块。它为简单动画提供了高级动画包装

---

编辑： 链接将永久重定向到

反应传递组和反应传递组已移动到社区维护的包中

---

从文件中

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

其中，

example

将是要绘制的组件的transistionName。和

-enter，enter active，-leave，-leave active

代表动画周期的相应节拍。这些将由React内部作为类名添加到项中

您可以使用它们来达到所需的效果。一个小的演示

---

附言：不确定这是否优于Velocity.js，我还没有使用它。

您可以使用react提供的CSSTransitionGroup

文档中的一个简单todo示例

 .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;
}

类TodoList扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={items:['hello'，'world'，'click'，'me']}；
this.handleAdd=this.handleAdd.bind（this）；
}
handleAdd（）{
const newItems=this.state.items.concat([
提示符（'输入一些文本'）
]);
this.setState（{items:newItems}）；
}
handleRemove（i）{
让newItems=this.state.items.slice（）；
新项目.拼接（i，1）；
this.setState（{items:newItems}）；
}
render（）{
const items=this.state.items.map（（item，i）=>(
this.handleRemove（i）}>
{item}
));
返回(
添加项
{items}
);
}
}

抱歉，我尝试了您的代码，并将“示例”作为类名添加到图像中，并将图像包装到中，但它不起作用…抱歉，这是我的一个错误。。应该是

transistionName

。同时更新了小提琴，以满足您的要求，使用了lorem像素进行图像处理。如果t工作，请告诉我。：）注意，您可以编写

this.state.images.map（（image，index）=>{返回this.renderThumb（image，index）；}）

as

this.state.images.map（this.renderThumb）

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

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

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

 .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;
}

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