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

Question

所以有一段时间我一直在离开jQuery，一般只是减少我的库使用在哪里 - 每个可能的a）编写更精简的代码，和b）真正理解在低级别发生的事情，特别是用户界面。虽然我已经将我的大部分UI动画移动到了CSS3，但是当你需要更多控制时，通常需要更多的控制，但对于一个小动画，我宁愿不要总是拉入velocity.js或greensock等。 / p>

看着你 - 可能不需要-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}＆amp;线上+和new Date()之前的el.style.opacity是什么？ 8表示？是+=吗？
2. 第5行，为什么划分400？
3. 这种用于一般快速动画的递归requestAnimationFrame技术是否存在任何内在错误？

如果我理解这种模式背后的概念：

1. 我们设定了我们的起始位置（强制喂食）和我们开始的时间，
2. 然后我们更新与通过的时间量相关的样式，
3. 直到满足最终状态，再次在下一个动画帧上打勾。

这是对的吗？

Answer 1

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