jQuery源码阅读笔记（11）

jQuery动画

除了事件之外，最有趣的便是动画效果了，简单粗暴的动画是很吸引人，甚至还有自定义动画

在动画的基础上，需要先完成CSS()方法

css(key[, value])

• 概述：返回第一个匹配元素对应的属性值，或者为所有匹配元素设置相应样式

• 解析：

  • 对于一个参数

    • 如果是字符串，返回第一个匹配元素对应的属性值

    • 如果是一个普通对象，则拆解键值对，按两个参数执行

    • 如果是一个数组，遍历元素按字符串处理，返回一个新的对象，存储了对应的键值对

      比较抽象，此处是将数组的元素作为对象的键，再将第一个匹配元素的样式值作为键的值

  • 对于两个参数

    • 标准键值对设置，对所有匹配元素执行
    • value为函数形式，返回值作为新值

  • 对于部分属性，如果给与了纯数字，是会帮助补充单位的，如

    //表现一致
    $('div').css('height',100);
    $('div').css('height',"100px");
    

  • 对于这步补充操作做为一个独立函数存在

    // 增补CSS属性值的单位
    const unit = (value, type) => {
      /*成立条件
      	1.纯数字
      	2.此属性可以设置px单位
        */
      if (
        isNumeric(value) &&
        /px$/.test(getComputedStyle(document.body)[type])
      ) {
        value += "px";
      }
      return value;
    };
    

• 实现：

  css(name, value) {
    if (arguments.length === 1) {
      if (isString(name)) {
        //单纯字符串，返回第一个对象的属性
        return getComputedStyle(this[0])[name];
      } else if (isArray(name)) {
        //真数组，返回相应的对象
        const obj = {};
        const target = this.first();
        for (let i = 0; i < name.length; i++) {
          obj[name[i]] = target.css(name[i]);
        }
        return obj;
      } else {
        //遍历这个对象
        return this.each(function () {
          $.each(name, (key, value) => {
            this.style[key] = unit(value, key);
          });
        });
      }
    } else {
      //对于长度超过2时
      if (isFunction(value)) {
        return this.each(function (index) {
          this.style[name] = unit(
            value.call(this, index, getComputedStyle(this)[name]),
            name
          );
        });
      } else {
        return this.each(function () {
          this.style[name] = unit(value, name);
        });
      }
    }
  }
  

• 浅谈动画实现

  在开始之前，需要了解动画的独特点在哪，比如hide()和show()，直接看挺简单，不说使用定时器，用CSS过渡很轻松就能看到一样的效果

  div:hover {
    transition: 5s;
    height: 0;
    width: 0;
    opacity:0;
  }
  

  甚至使用过渡，还能让animate()属性改变颜色，一切很顺理成章

  不过还有几点需要解决

  • 使用过渡，需要保证定时回调函数

    使用延时器做不到，会有偏差

  • 要能够随时停止，定格样式，而且再次开始动画要能回到开始的样式

    比如一个高宽100px的元素执行消失指令，中途停止了，然后执行了展开动画，它得回到100px，而非不动弹

  • 无关样式在动画结束时，不能保留，不能覆盖无关样式

  • 能够执行批量动画，队列形式，而且还能清除

  说起来还是太死板，看一下官方的打法

  以下是我个人的想法，实际的源码要更复杂一些

  • 实现方面，使用的是定时器，与轮播原理一致，不会有时间上的偏差

    所以当元素设置了过渡属性时，会发现动画不对劲了，因为过渡延迟了动画的动作

    也是因为如此，animate()是不会搭理涉及颜色的动画

  • 停止动作，只是将定时器暂停，然后使用CSS()收集样式，再贴上去

  • 而对于原样式，在动画开始前记录好，就不怕中途刹车

  • 批量动画，则是存在一个队列结构，每一个元素都有自己单独的队列

  那难道就认了，使用定时器来完成？

  不，在此情况下我发现了一个新的对象，是原生DOM元素带有的，IE不搭理，Animation

  借助它的灵活度，将优势都掌握一手，既不会害怕延迟与过渡不能相接，也能修改颜色，当然也用不着过渡了，一整套动画解决方案

  此对象的出现，应该也和jQuery有很大关系，不过对于这种底层的动画是写的越来越少了，有点生不逢时的感觉