Управлять отрицательным значением задержки анимации в MS Edge - PullRequest
Новая
       7

Управлять отрицательным значением задержки анимации в MS Edge

0 голосов
/ 22 ноября 2018

Я пытаюсь использовать задержку анимации с отрицательными значениями.Значение должно быть обработано с помощью JavaScript для управления анимацией.Следующая ручка работает во всех современных браузерах, но не в MS Edge.Также не с соответствующими префиксами поставщика.

Пример Codepen 

function change(val){
  
  var box = document.getElementById('box');
  
  box.style.animationDelay = -val + 's';
}
#box {
  width: 200px;
  height: 200px;
  background-color: red;
  animation-name: effect;
  animation-duration: 1s;
  animation-delay: 0s;
  -webkit-animation-play-state: paused;
  -moz-animation-play-state: paused;
  -ms-animation-play-state: paused;
  -o-animation-play-state: paused;
  animation-play-state: paused;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -ms-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

input {
  margin-top: 10px;
  width: 200px;
}

@-webkit-keyframes effect {
  to {
    background-color: blue;
  }
}
@-moz-keyframes effect {
  to {
    background-color: blue;
  }
}
@-ms-keyframes effect {
  to {
    background-color: blue;
  }
}
@keyframes effect {
  to {
    background-color: blue;
  }
}
<div id="box" class="transitionEffect"></div>
<input type="range" id="range" min="0" max="1" step="0.05" value="0" oninput="change(this.value)">

Разве это не поддерживается MS Edge?

Ответы [ 2 ]

0 голосов
/ 23 ноября 2018

Отлично, я перестроил перо и переключаю анимацию при использовании MS Edge.Производительность немного снижается, но пользователи MS Edge все равно не знают об этом иначе.:)

Вы должны убедиться, что шаг глубже 1, чтобы получить более плавную анимацию.

Спасибо за помощь!

0 голосов
/ 22 ноября 2018

Этот отчет об ошибке в MS показывает проблему: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7729819/

Вы не можете изменять значения, связанные с анимацией, с эффектом в Edge.Кажется, что Edge придерживается более старой черновой спецификации CSS-анимации, в которой говорится, что

Значения, используемые для ключевых кадров и свойств анимации, моментально снимаются во время запуска анимации.Изменение их во время выполнения анимации не имеет никакого эффекта.

С https://www.w3.org/TR/2013/WD-css3-animations-20130219/#animations

Но у вас есть один шанс: если вы измените свойство animation-name на другое значение, анимация начнется заново, и вы сможете одновременно изменить другие свойства анимации.,Это необходимо делать повторно каждый раз, когда вы хотите изменить свойство анимации.Конечно, вы можете переключаться между анимациями с одинаковыми определениями ключевых кадров, но только с разными именами.

...