2

我是 React 的新手。我制作了一个带有按钮和图像网址列表的小应用程序。单击按钮时，图像 url 将添加到列表中。.map我使用标准函数渲染图像 url 列表。

我想在显示图像时制作一个快速的 ui 动画效果：淡入和从左侧滑入的组合。我尝试了 Velocity.js 并找到了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 函数

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（从 docs 复制）：

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

2 回答 2

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>
    );
  }
}
于 2017-03-21T10:30:39.787 回答
0

我建议使用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，没有使用过。

于 2017-03-21T10:30:32.757 回答