JS .animate() 在 Firefox/IE 中不起作用答案

【问题标题】：JS .animate() not working in Firefox/IEJS .animate() 在 Firefox/IE 中不起作用
【发布时间】：2016-02-21 01:54:26
【问题描述】：

所以我正在尝试为 div 设置动画，但我不确定我在这里做错了什么。以下代码适用于最新的 Safari 和 Chrome，但不适用于 Internet Explorer 和 Firefox。在 Firefox 上，错误为 el.animate is not a function 有什么建议/解决方案吗？

var slowMo = false;
var dur = slowMo ? 5000 : 500;

function $(id) {
  return document.getElementById(id);
}

var players = {};

var hue = 0;

function addTouch(e) {
  var el = document.createElement('div');
  el.classList.add('ripple');
  var color = 'hsl(' + (hue += 70) + ',100%,50%)';
  el.style.background = color;
  var trans = 'translate(' + e.pageX + 'px,' + e.pageY + 'px) '
  console.log(trans);
  var player = el.animate([{
    opacity: 0.5,
    transform: trans + "scale(0) "
  }, {
    opacity: 1.0,
    transform: trans + "scale(2) "
  }], {

    duration: dur

  });
  player.playbackRate = 0.1;
  players[e.identifier || 'mouse'] = player;

  document.body.appendChild(el);
  player.onfinish = function() {
    if (!document.querySelector('.ripple ~ .pad')) each(document.getElementsByClassName('pad'), function(e) {
      e.remove();
    });
    el.classList.remove('ripple');
    el.classList.add('pad');

  }
}

function dropTouch(e) {
  players[e.identifier || 'mouse'].playbackRate = 1;
}

function each(l, fn) {
  for (var i = 0; i < l.length; i++) {
    fn(l[i]);
  }
}
document.body.onmousedown = addTouch;
document.body.onmouseup = dropTouch;

document.body.ontouchstart = function(e) {
  e.preventDefault();
  each(e.changedTouches, addTouch);
};
document.body.ontouchend = function(e) {
  e.preventDefault();
  each(e.changedTouches, dropTouch);
};

var el = document.body;

function prevent(e) {
  e.preventDefault();
}

el.addEventListener("touchstart", prevent, false);
el.addEventListener("touchend", prevent, false);
el.addEventListener("touchcancel", prevent, false);
el.addEventListener("touchleave", prevent, false);
el.addEventListener("touchmove", prevent, false);




function fakeTouch() {
  var touch = {
    pageX: Math.random() * innerWidth,
    pageY: Math.random() * innerHeight,
    identifier: 'fake_' + Math.random() + '__fake'
  }
  addTouch(touch);
  var length = Math.random() * 1000 + 500;
  setTimeout(function() {
    dropTouch(touch);
  }, length)
  setTimeout(function() {
    fakeTouch();
  }, length - 100)

}
if (location.pathname.match(/fullcpgrid/i)) fakeTouch(); //demo in grid

.ripple {
  position: absolute;
  width: 100vmax;
  height: 100vmax;
  top: -50vmax;
  left: -50vmax;
  border-radius: 50%;
}
body {
  overflow: hidden;
}
.pad {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

&lt;div class="pad"&gt;&lt;/div&gt;

Code thanks to Kyle

【问题讨论】：

.animate() 不是 DOM 方法，Animation 在 ie 中不受支持，但在 firefox 40+ 中支持。
@guest271314 我可以通过什么方式配置它在 IE 中工作？另外，我正在测试 FF 44.0.2
IE 根本不支持它，所以你不能将它配置为在 IE 中工作，你可以使用 jQuery 之类的库来帮助创建跨浏览器动画。 api.jquery.com/animate developer.mozilla.org/en/docs/Web/API/…
@guest271314 遍历元素列表并为每个元素执行一个功能
@guest271314 第 43 行

标签： javascript html firefox gecko

【解决方案1】：

所以我采取了不同的方法来达到相同的结果。我认为这个更简单，适用于所有浏览器。

https://jsfiddle.net/cbrmuxcq/1/

虽然有一个小问题，但我不确定是什么原因造成的。如果我不等待（通过使用setTimeout()），则不会发生转换，但通过设置超时它会发生。如果有人能发现问题，我会修复小提琴并相应地更新我的答案。

【讨论】：