Как получить анимацию () для элемента HTML в Chrome? - PullRequest
Новая
       88

Как получить анимацию () для элемента HTML в Chrome?

0 голосов
/ 27 августа 2018

Я нахожусь на Chrome версии 67.0.3396.99 (64-разрядная версия).

Документация Mozilla по API веб-анимации описывает метод getAnimations() примерно так: 

document.getAnimations().forEach(
  function (animation) {
    animation.playbackRate *= .5;
  }
)

Но, похоже, он не поддерживается в Chrome. Я пытался ... 

var animations = document.getAnimations ? document.getAnimations() : document.timeline.getAnimations();

… согласно этому blogpost также от Daniel C. Wilson, но в Chrome 67 он выходит со следующей ошибкой: 

Uncaught TypeError: Cannot read property 'getAnimations' of undefined

Есть ли способ получить массив анимаций, примененных к элементу HTML, с помощью API веб-анимации?

1 Ответ

0 голосов
/ 27 августа 2018

Пожалуйста, посмотрите на Таблица совместимости браузера Таблица ... Пока не поддерживается. Но это будет работать с Polyfill 

//Corresponding blog post: https://danielcwilson.com/blog/2015/08/animations-part-3 

var a = document.querySelectorAll('div');
a = Array.prototype.slice.call(a);

a.forEach(function(el, i, ra) {
  var to = {
    x: Math.random() * (i % 2 === 0 ?-11 : 11),
    y: Math.random() * 12
  }
  
  el.animate([
    { transform: 'translate(0,0)' },
    { transform: 'translate('+to.x+'rem,'+to.y+'rem)' }
  ], {
    duration: (Math.random() + 1) * 2000,
    direction: 'alternate',
    fill: 'both',
    iterations: Infinity,
    easing: 'ease-in-out'
  });
});

var button = document.querySelector('input');

button.addEventListener('click', function(e) {
  //Get all the AnimationPlayers
  var players;
  if (typeof document.getAnimations === 'function') {
    players = document.getAnimations();
  } else {
    players = document.timeline.getAnimations();
  }
  if (players && players.length) {
    console.log(players);
    var action;
    if (players[0].playState === 'running') {
      action = 'pause';
    } else if (players[0].playState === 'paused') {
      action = 'play';
    } else {
      return;
    }
    players.forEach(function(player, i, ra) {
      player[action](); //player.pause() or player.play()
      
    });

    button.value = (action === 'play') ? 'Pause All' : 'Play All';
  } else {
    console.log('No active animations');
  }
});
body {
  background: #324242;
  color: #f3f3f8;
  text-align: center;
  overflow-x: hidden;
}

div {
  width: 1rem;
  height: 1rem;
  background: #f3f3f8;
  border-radius: 1rem;
  display: inline-block;
  margin: 1rem;
}

input {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  appearance: none;
  border: 2px solid #f3f3f8;
  border-radius: .4rem;
  color: #f3f3f8;
  background: #324242;
  line-height: 3;
  padding: 0 1rem;
  font-size: 1rem;
}
<script src="https://danielcwilson.com/js/web-animations-next-lite.min.js"></script>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

<input type="button" value="Pause All">
...