现在可以添加动画了。

你可能注意到这一步在元素底部附近添加了一个小指示器。它显示轮播中选中的项目。你可以在 render 方法中查看代码，了解这是如何实现的。它遵循类似的模式，根据 selected 项目来设置 left 和 width 的位置。

现在从 @lit-labs/motion 包导入 animate 指令。

以 @lit-labs 发布的包尚未完全准备好用于生产环境。

这些项目可能是实验性的或不完整的，并且可能会发生破坏性更改。查看 Lit 文档了解更多信息。

在模块顶部的其他 import 语句之后添加导入。

import {animate} from '@lit-labs/motion';

通常，你还需要将 @lit-labs/motion 添加到你的 package.json 中，但为了加快进度，这已经完成了。

animate 指令将负责处理位置动画。它非常适合在不同的渲染布局之间进行 "补间"动画。

在 render 方法的 return 语句中，将 animate 指令添加到插槽周围的"容器"上：

return html`
  <div class="fit"
    ${animate()}

现在将 animate 指令添加到 render 方法底部的 indicator 元素上：

  <div class="indicator"
    ${animate()}

请注意，即使你设置的是 left 属性， animate 指令实际上是在动画化 CSS 的 transform 属性。这更加高效，因为它不需要浏览器执行布局或样式重新计算。

animate 指令设计得非常简单易用，但它有很多配置选项。查看 @lit-labs/motion readme 了解更多信息。

查看这篇关于 FLIP 的文章，了解更多关于 animate 指令使用的技术。

现在试着点击元素……