Как остановить и сбросить анимацию, не разрушая оригинальный тег объекта? - PullRequest
Новая
       10

Как остановить и сбросить анимацию, не разрушая оригинальный тег объекта?

0 голосов
/ 17 сентября 2018

Я пытаюсь восстановить анимацию объекта до начальной точки, чтобы я мог перезапустить его с самого начала. 

function swap_animation(node, from, to) {
  let t = node.style.animationDuration;
  node.style.animationDuration = "0s";
  node.style.animationPlayState = "initial";
  setTimeout(function(){
    node.style.animationDuration = t;
    node.classList.remove(from);
    node.classList.add(to);
  }, 10);
}

function grow() {
  let node = document.getElementById("item");
  swap_animation(node, "shrink", "grow");
}

function shrink() {
  let node = document.getElementById("item");
  swap_animation(node, "grow", "shrink");
}
.grow {
  animation-name: title-min;
  animation-duration: 10s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  transform-origin: 0% 100% 0;
}

.shrink {
  animation-name: title-min;
  animation-duration: 10s;
  animation-timing-function: linear;
  animation-direction: reverse;
  animation-fill-mode: forwards;
  transform-origin: 0% 100% 0;
}

@keyframes title-min
{
  from { transform: scale(0.5); }
  to   { transform: scale(1.0); }
}
<body>
  <button onclick="grow()">Eat me! ?</button>
  <button onclick="shrink()">Drink me! ?</button>
  <h1 id="item">Alice ?</h1>
</body>

Пример показывает, что если вы нажмете между Съешь меня! и Выпей меня! , Алиса растет и сжимается в течение 10 секунд. Однако, если вы переключаетесь между ними, вы заметите, что анимация продолжается с того места, где она была до переключения.

Мне кажется, я где-то читал, что один из способов сделать это - клонировать объект и заменить старый на новый. Это кажется излишним, и я думаю, что это может вызвать проблемы с производительностью, особенно если объект большой, а также плохим, так как может вызвать фрагментацию памяти.

Должен быть какой-то способ сохранить объект и изменить его свойства, чтобы исправить это, не так ли?

1 Ответ

0 голосов
/ 17 сентября 2018

Хорошо, я нашел ответ. Это для запуска оплавления. Получил ответ от с этого сайта . Не совсем уверен, что void делает там. 

function swap_animation(node, from, to) {
  node.classList.remove(from);
  void node.offsetWidth;
  node.classList.add(to);
}

function grow() {
  let node = document.getElementById("item");
  swap_animation(node, "shrink", "grow");
}

function shrink() {
  let node = document.getElementById("item");
  swap_animation(node, "grow", "shrink");
}
.grow {
  animation-name: title-min;
  animation-duration: 10s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  transform-origin: 0% 100% 0;
}

.shrink {
  animation-name: title-min;
  animation-duration: 10s;
  animation-timing-function: linear;
  animation-direction: reverse;
  animation-fill-mode: forwards;
  transform-origin: 0% 100% 0;
}

@keyframes title-min
{
  from { transform: scale(0.5); }
  to   { transform: scale(1.0); }
}
<body>
  <button onclick="grow()">Eat me! ?</button>
  <button onclick="shrink()">Drink me! ?</button>
  <h1 id="item">Alice ?</h1>
</body>
...