React - 当项目离开DOM时跳转动画

Question

我在标签列表中使用ReactCSSTransitionGroup，因此当用户删除标签时，它会淡出。我注意到有点跳跃，所以我放慢了动画过渡时间以查看发生了什么。

标签以奇怪的方式移动，并且由于宽度不同，当它消失时看起来有点刺耳。这就是React动画的工作原理，还是我做错了什么？

这是全速（.3s）的另一个例子。

以下代码：

let ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;

TagList = React.createClass({
  displayName: 'TagList',

  propTypes: {
    tags: React.PropTypes.array,
    onTagClick: React.PropTypes.func.isRequired
  },

  render() {
    let tags;

    if (!this.props.tags) {
      return false;
    }

    tags = this.props.tags.map((tag, i) => {
      return <Tag key={i}
                  index={i}
                  onTagClick={this.props.onTagClick}>{tag}</Tag>
    });

    return (
      <div className="tag-list">
        <ReactCSSTransitionGroup transitionName="tag">
          {tags}
        </ReactCSSTransitionGroup>
      </div>
    )
  }
});

Tag = React.createClass({
  displayName: 'Tag',

  propTypes: {
    onTagClick: React.PropTypes.func.isRequired
  },

  render() {
    return (
      <span className="tag"
            onClick={this.props.onTagClick.bind(null, this.props.index)}>
        <span className="tag-name">{this.props.children}</span>
      </span>
    )
  }
});

Answer 1

React使用添加/删除元素的key来确定要设置动画的DOM节点。您正在为密钥使用标记的数组索引，但这在渲染时并不稳定。

例如，如果你有数组

[1, 2, 3, 4, 5]

并删除索引2处的项目，然后将

留下

[1, 2, 4, 5]

但是，对于React，现在看起来4位于索引2;将被删除的key为4，因为现在数组中只有四个项目。这就是为什么在第一个示例中，您单击的标记是已删除，但淡出的DOM节点是针对数组中的 last 项目

解决方案是使用不会为每个标记更改的密钥（例如ID等，即使您只是在客户端上生成唯一ID。）