javascript - 如何在普通 javascript 中为样式属性设置动画？

Question

所以有一段时间我一直在远离 jQuery，并且一般来说只是减少我的库的使用 - 一切可能的地方 a)编写更精简的代码，以及 b)真正了解底层发生了什么，特别是周围用户界面。虽然我已将大部分 UI 动画移至 CSS3，但有时您需要更多控制，但对于单个小动画，我不希望总是需要引入 velocity.js 或 greensock 等。

看看你可能不需要的 jquery，他们演示了一个 fadeIn 函数，看起来像这样:

function fadeIn(el) {
  el.style.opacity = 0;

  var last = +new Date();
  var tick = function() {
    el.style.opacity = +el.style.opacity + (new Date() - last) / 400;
    last = +new Date();

    if (+el.style.opacity < 1) {
      (window.requestAnimationFrame && requestAnimationFrame(tick)) ||     setTimeout(tick, 16);
    }
  };

  tick();
}

fadeIn(el);

我大致了解这个功能，但对非常具体的元素有几个问题:

1. 第 3、5、6 和 8 行 new Date() 和 el.style.opacity 之前的 + 表示什么？是不是类似 += 的东西？
2. 第 5 行，为什么要除以 400？
3. 这种用于一般快速动画的递归 requestAnimationFrame 技术是否存在任何固有的错误？

如果我理解这个模式背后的概念:

1. 我们设置起始位置(强制喂食)和开始时间，
2. 然后我们根据耗时更新样式，
3. 直到满足最终状态，在下一个动画帧上再次调用 tick。

这是正确的吗？

Answer 1

1. 一元 + 是一种强制将值解释为数字的快速方法。
2. 除以 400 是代码设置淡入速率的方式。较大的数字会使淡入淡出时间更长，而较小的数字会使淡入淡出更快。该数字给出了在元素完全不透明之前将经过(或多或少)的毫秒数。
3. 它不是递归的。对该函数的引用被传递给计时器机制(setTimeout() 或 requestAnimationFrame())，但当计时器触发时，原始调用将退出。