在本节中，你将实现点击 word-viewer 时动画反向播放的功能。

需要一个新的内部状态来表示当前动画的播放方向 playDirection。

// word-viewer.ts

  @state() private playDirection: -1 | 1 = 1;

// word-viewer.js

  static properties = {
    playDirection: {state: true},
    ...
  };

  constructor() {
    ...
    this.playDirection = 1;
  }

接下来，更新 render() 方法中查找显示 word 的计算逻辑，以处理 this.idx 为负数的情况。

// word-viewer.ts

  render() {
    ...
    const idx = ((this.idx % splitWords.length) + splitWords.length) % splitWords.length;
    const word = splitWords[idx];
    ...
  }

// word-viewer.js

  render() {
    ...
    const idx = ((this.idx % splitWords.length) + splitWords.length) % splitWords.length;
    const word = splitWords[idx];
    ...
  }

修改 tickToNextWord 以根据 playDirection 选择下一个单词。

// word-viewer.ts

  tickToNextWord = () => { this.idx += this.playDirection; };

// word-viewer.js

  tickToNextWord = () => { this.idx += this.playDirection; };

然后添加一个 switchPlayDirection 方法来反转 playDirection。

// word-viewer.ts

  switchPlayDirection() {
    this.playDirection *= -1;
  }

// word-viewer.js

  switchPlayDirection() {
    this.playDirection *= -1;
  }

最后，使用 Lit 的声明式事件监听语法将 this.switchPlayDirection 绑定到 <pre> 元素的点击事件。

在模板中使用声明式 @ 语法添加的事件监听器会自动绑定到组件，因此不需要使用箭头函数。更多信息请参阅事件文档。

// word-viewer.ts

  render() {
    ...
    return html`<pre
      @click=${this.switchPlayDirection}
    >${word}</pre>`;
  }

// word-viewer.js

  render() {
    ...
    return html`<pre
      @click=${this.switchPlayDirection}
    >${word}</pre>`;
  }

在预览中点击 word-viewer，单词动画应该会反向播放。

由于很难看出动画的播放方向，在下一节中你将根据动画方向添加动态样式。