【Vue】vue3中通过自定义指令实现数字的动态增加动画

在Vue 3中通过自定义指令实现数字的动态增加动画，可以利用Vue的自定义指令功能，这允许你扩展Vue的内置指令，使得DOM操作更加灵活和强大。以下是如何创建一个自定义指令来实现数字动态增加动画的步骤：

效果演示

代码实现

1、定义指令代码

import {
    Directive } from 'vue';

// 动画持续时间，ms
const DURATION = 1500;

/**
 * @description 基于Vue3自定义指令，实现数字递增动画效果
 *
 * @example     `<div v-increase="100"></div>`
 */
export const increase: Directive = {
   
  // 在绑定元素的父组件
  // 及他自己的所有子节点都挂载完成后调用
  mounted(el, binding) {
   
    const {
    value: maxCount } = binding;

    el.$animation = animate((progress) => {
   
      el.innerText