JS .animate（）无法在Firefox / IE中运行

So I'm trying to animate a div but I'm not sure what I'm doing wrong here. The following code works just fine on the latest Safari and Chrome but not on Internet Explorer and Firefox. On Firefox, the error being el.animate is not a function Any suggestions/solutions?

所以我试图动画一个div,但我不确定我在这里做错了什么。以下代码适用于最新的Safari和Chrome,但不适用于Internet Explorer和Firefox。在Firefox上,el.animate错误不是函数任何建议/解决方案?

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;
}

<div class="pad"></div>

Code thanks to Kyle

代码感谢Kyle

1 个解决方案

#1

So I took a different approach to achieve the same result. I think this one is a lot more straightforward and works in all browsers.

所以我采取了不同的方法来实现相同的结果。我认为这个更直接,适用于所有浏览器。

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

Though there is a slight issue and I'm not sure what causes it. If I don't wait (by using setTimeout()), the transition doesn't happen but by setting a timeout it does. If anyone can spot the issue, I'll fix the fiddle and update my answer accordingly.

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