「这是我参与2022首次更文挑战的第26天，活动详情查看：2022首次更文挑战」。

写在前面

前面一篇文章完成了 my-jquery 中样式相关的方法 css
相对而言，css 方法较前面实现的那些方法相对而言复杂一点，需要根据它接受参数的不同，来实现对应的方法
同样的，参照 jquery 源码中 animate 方法的实现，我么也需要先区分接受参数的类型，然后实现对应的方法

实现 animate 方法

首先，我们先定义该方法的使用

$(".btn").animate({ width: "300px" }, 1000, function () {
    console.log("运动完成");
});

$("div").animate({ width: "500px" }, "slow", function (e) {
    console.log("运动完成", e.target);
});

$("div").animate({ width: "300px" }, function () {
    console.log("运动完成");
});

animate 方法接收的参数也有三种形式，一共可以接收三个参数
- 第一个是属性值变化之后的状态值
- 第二个是动画的过渡时间，可以是数字，可以是过渡效果名的字符串，也可以省略，直接使用默认的过渡效果
- 第三个是动画完成后的回掉函数
因此我们需要判断参数个数，与第二个参数的类型，即可区分这三种参数情况
下面市 animate 方法的实现

  animate(...args) {
    let transitionTime = 1000;
    if (typeof args[1] !== "function") {
      if (typeof args[1] === "string") {
        switch (args[1]) {
          case "slow":
            transitionTime = 2000;
            break;
          case "normal":
            transitionTime = 1000;
            break;
          case "fast":
            transitionTime = 300;
            break;
        }
      } else if (typeof args[1] === "number") {
        transitionTime = args[1];
      }
    }

    for (let i = 0; i < this.length; i++) {
      this[i].style.transition = `${transitionTime / 1000}s all`;

      if (typeof args[args.length - 1] === "function") this[i].addEventListener("transitionend", args[args.length - 1]);

      for (let j in args[0]) {
        this.#setStyle(this[i], j, args[0][j]);
      }
    }
  }

animate 方法接受的参数具有不确定性，需要有更多的边界情况判断，我们这里更加关注 animate 方法本身的实现，暂且忽略这些边界情况
- 若接收的第二个参数，其类型是函数时，判断为第三种参数情况
- 否则，只用判断情况一和情况二
  - 若第二个参数类型为字符串，那么可以判断为第二种参数情况
  - 最后剩下的就是第一种情况
fast normal slow 是 animate 方法内置的三种语义化的动画过渡时间
分析参数，确定动画过渡时间之后，我们可以开始设置相应元素的动画样式属性
最后通过 addEventListener 给动画元素注册一个 transitionend 的事件，在过渡期结束时，调用传给 animate 方法的回掉函数

小结

前面几篇文章，我们一步一步实现了 my-jquery，实现的功能有
- 参数为选择器字符串、为原生 dom 时进行单事件或者多事件的绑定
- 参数为函数时的，延迟输入函数的执行时机，到页面 dom 结构加载完成时再执行
- 方法的链式调用，以及操作节点的回滚功能
- 封装操作元素样式的方法
- 以及本文封装的动画方法
jquery 虽然已经是过去式了，但是其内部的源码实现的思想，依然值得我们学习借鉴
相信有了这几篇文章的基础，小伙伴们再去阅读，jquery 源码就不会很困难

最后

今天的分享就到这里了，欢迎大家在评论区里面进行讨论 👏。
如果觉得文章写的不错的话，希望大家不要吝惜点赞，大家的鼓励是我分享的最大动力 🥰

从 0 开始开发 jquery 工具库（六）

写在前面

实现 animate 方法

小结

最后