0
Итак, я пытаюсь анимировать div, но я не уверен, что я делаю неправильно здесь. Следующий код отлично подходит для последних версий Safari и Chrome, но не для Internet Explorer и Firefox. На Firefox, была ошибка el.animate is not a function Любые предложения/решения?JS .animate() не работает в Firefox/IE
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>
'.animate()' не является методом DOM, 'Animation' не поддерживается, хотя поддерживается в firefox 40+. – guest271314
@ guest271314 В любом случае я могу настроить его работу в IE? Кроме того, я тестирую FF 44.0.2 –
Что такое 'each()'? – guest271314