三点图标颤动 - TypeScript

在前端开发中，我们经常会用到三个点的图标来表示某些操作或者菜单选项，而为了增加交互性，我们有时候会给这些图标添加一些动画效果。在本文中，将介绍如何使用 TypeScript 实现三点图标的颤动效果。

实现思路

首先，我们需要将三个点的图标封装成一个组件，然后为这个组件添加一个 CSS 类，用于控制颤动效果。接着，我们需要在组件初始化时添加该类，然后在某个时间间隔内循环添加和删除该类，从而实现颤动效果。

代码实现

首先，我们需要创建一个 Dots 组件，该组件包含三个点的图标，并有一个 shake 属性，用于控制是否启用颤动效果。代码如下：

import { Component, Vue } from 'vue';

@Component({
  name: 'Dots',
  props: ['shake'],
})
export default class Dots extends Vue {
  render() {
    return (
      <div class={['dots', { shake: this.shake }]}>
        <span class="dot" />
        <span class="dot" />
        <span class="dot" />
      </div>
    );
  }
}

接着，我们需要在 CSS 中定义一个 shake 类，代码如下：

.dots.shake span {
  animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) 0s infinite;
}

@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translateX(-5px);
  }

  20%,
  40%,
  60%,
  80% {
    transform: translateX(5px);
  }
}

最后，我们需要在组件初始化时，创建一个定时器，定时添加和删除 shake 类。代码如下：

import { Component, Vue } from 'vue';

@Component({
  name: 'Dots',
  props: ['shake'],
})
export default class Dots extends Vue {
  private timer?: number;

  created() {
    this.timer = setInterval(() => {
      const dots = this.$el.querySelector('.dots');
      dots && dots.classList.toggle('shake');
    }, 2000);
  }

  beforeDestroy() {
    this.timer && clearInterval(this.timer);
  }

  render() {
    return (
      <div class={['dots', { shake: this.shake }]}>
        <span class="dot" />
        <span class="dot" />
        <span class="dot" />
      </div>
    );
  }
}

总结

本文介绍了如何使用 TypeScript 实现三点图标的颤动效果。我们首先封装了一个 Dots 组件，并为其添加了一个 shake 属性，然后在 CSS 中定义了一个 shake 类，最后在组件初始化时使用定时器来控制 shake 类的添加和删除。