用两行代码制作精彩的动画交互（新技术）

先看最终效果

首先，我像平常一样创建了一个布局。接下来，我编写了一些 JavaScript 来删除一个列表项，并有一点延迟，以查看它首先获得选中状态。删除一个项目看起来像这样：

list.addEventListener('change', (e) => {
  setTimeout(() => {
    removeListItemFromInputChangeEvent(e)
  }, 300)
})

用两行代码制作精彩的动画交互（新技术）

删除item的用户体验并不好。由于该item已被删除，因此它旁边的item取代了它。但是看起来就像一直在那里一样。如果我们可以在删除它的时候让所有item整齐地移动到新位置，并通过这样做可以为用户提供适当反馈，该怎么办呢？在过去，这需要相当多的 JavaScript 来完成，即使这样，它的工作也有点卡顿。现在让我们（技术上）添加两行代码。首先，将删除函数的调用包装在startViewTransition。为了更好地兼容，我们还将提供检查功能，以逐步增强用户体验。这意味着，如果支持 View Transitions API，我们可以通过漂亮的动画增强默认行为：

list.addEventListener('change', (e) => {
  setTimeout(() => {
    if (!document.startViewTransition) {
      removeListItemFromInputChangeEvent(e)
    } else {
      document.startViewTransition(() => {
        removeListItemFromInputChangeEvent(e)
      })
    }
  }, 300)
})

接下来，我们为每个列表项添加唯一的名称：

<li style="view-transitions-name: card-1">
  <label>
    <input type="checkbox" />
    Check this card
  </label>
</li>

现在，如果我们删除一个项目，我们会看到以下行为：

用两行代码制作精彩的动画交互（新技术）

只需为每个列表项添加document.startViewTransition唯一的和view-transitions-name，整个网格重新定位就会动画化，从而为用户提供更好的反馈。太棒了，对吧？我发现这种方法的最大好处之一是 View Transitions API 只需要之前和之后的状态。如何构建布局、更改哪些属性或两个视图有多么不同并不重要。只要您的更改（删除一个列表项节点）之前和之后的项目具有匹配的view-transitions-name属性，浏览器就会在它们之间进行动画处理。

现在，让我们添加一个按钮，允许您添加新项目：

addButton.addEventListener('click', () => {
  addListItem()
})

用两行代码制作精彩的动画交互（新技术）

删除项目时，我们会看到与之前相同的无动画行为。现在让我们再次添加document.startViewTransition：

addButton.addEventListener('click', () => {
  if (!document.startViewTransition) {
    addListItem()
  } else {
    document.startViewTransition(() => {
      addListItem()
    })
  }
})

用两行代码制作精彩的动画交互（新技术）