animation - 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 节点是数组中最后项的原因。

解决方案是使用不会因每个单独标签而改变的 key (例如 ID 等，即使您只是在客户端上生成唯一的 ID。)