可以运行了！但是视觉体验还可以改进，更改选中的项目时有些突兀。这里是使用动画来提供反馈的绝佳场景。

为元素添加动画可能比较棘手，因此你将分几个步骤来处理。首先，DOM 和样式需要做一些更改。当选择变化时，轮播应该从之前选中的项目动画过渡到新选中的项目。为此，它需要能够同时显示前一个和当前选中的项目。

导入 styleMap 指令并按如下方式更新 render 方法：

import {styleMap} from 'lit/directives/style-map.js';

// ...
private left = 0;
render() {
  if (this.hasValidSelected()) {
    this.selectedInternal = this.selected;
  }
  const animateLeft = ``;
  const selectedLeft = ``;
  const previousLeft = ``;
  return html`
    <div class="fit"
      @click=${this.clickHandler}
      style=${styleMap({left: animateLeft})}
    >
      <div class="fit" style=${styleMap({left: previousLeft})}>
        <slot name="previous"></slot>
      </div>
      <div class="fit selected" style=${styleMap({left: selectedLeft})}>
        <slot name="selected"></slot>
      </div>
    </div>
  `;
}

import {styleMap} from 'lit/directives/style-map.js';

// ...
left = 0;
render() {
  if (this.hasValidSelected()) {
    this.selectedInternal = this.selected;
  }
  const animateLeft = ``;
  const selectedLeft = ``;
  const previousLeft = ``;
  return html`
    <div class="fit"
      @click=${this.clickHandler}
      style=${styleMap({left: animateLeft})}
    >
      <div class="fit" style=${styleMap({left: previousLeft})}>
        <slot name="previous"></slot>
      </div>
      <div class="fit selected" style=${styleMap({left: selectedLeft})}>
        <slot name="selected"></slot>
      </div>
    </div>
  `;
}

选中的项目需要滑动进入视图。为此，为 previous 元素添加了一个插槽。这样可以管理之前选中和当前选中项目的位置。

在项目周围有一个"容器"元素，它将向左或向右动画移动。 @click 处理器现在放在"容器"上更合理，这样不会错过任何点击。

在接下来的步骤中，你将设置 left 属性，并使用它来计算"容器"以及 previous 和 selected 插槽上 styleMap 指令的值。

在此模板更改后，selected 项目将不再显示。这是因为它移动到了 previous 插槽的下方。你可以通过移除 :host 选择器中的 overflow: hidden 来验证这一点。要修复这个问题，将 selected 插槽容器的 top 设置为向上移动。

在 styles 模块中添加以下 CSS：

styles

Permalink to "styles"

.selected {
  top: -100%;
}