Изменение направления CSS-анимации с помощью JavaScript ⇐ CSS

[Anonymous]

Возьмем следующий пример:

Код: Выделить всё

const keybind = {
"ArrowDown": function(event) {
document.getAnimations().forEach(animation => animation.currentTime += 1000);
document.getAnimations().forEach(animation => animation.currentTime = Math.min(animation.currentTime, animation.effect.getTiming().duration));
},
"ArrowUp": function(event) {
document.getAnimations().forEach(animation => animation.currentTime -= 1000);
document.getAnimations().forEach(animation => animation.currentTime = Math.max(animation.currentTime, 0));
}
}
document.body.addEventListener("keydown", (event) => keybind[event.key] && keybind[event.key](event));

Код: Выделить всё

@keyframes slide {
0% {
object-position: top;
}
100% {
object-position: bottom;
}
}

body {
width: 100%;
height: 100%;
overflow:hidden;
}

img {
width: 100%;
height: 256px;
object-fit: cover;
animation-name: "slide";
animation-duration: 5s;
animation-timing-function:linear;
animation-fill-mode:both;
animation-play-state: paused;
}

Код: Выделить всё

[img]https://i.sstatic.net/eAebw9Zv.jpg[/img]

У вас должна быть возможность прокручивать изображение с помощью стрелки вверх/стрелки клавиши вниз (для работы требуется фокус клавиатуры, т. е. сначала щелкнуть изображение).
это делается путем установки свойства currentTime анимации. Самое интересное то, что происходит с стрелкой вверх. Здесь мы вычитаем из текущего времени, создавая иллюзию движения назад. однако, если бы мы изменили направление анимации, это полностью изменило бы всю анимацию, и код стрелкиВверх добавил бы вместо вычитания, чтобы достичь того же эффекта.
В основном эти два подхода таковы: либо добавление и вычитание из currentTime, либо каким-то образом изменение направления анимации. Я думаю, что второй вариант довольно элегантен, поскольку мы можем повторно использовать некоторый код.
Вызов функцииanimation.reverse(), похоже, не влияет на направление анимации, поскольку насколько я могу судить, то, что он делает, это что-то вроде

Код: Выделить всё

animation.playbackRate *= -1;
animation.currentTime = animation.effect.getTiming().duration - animation.currentTime;
animation.play();

Мы по-прежнему идем вперед и назад, вычитая и добавляя к currentTime
Похоже, Javascript не позволяет нам изменять CSS анимация-направление, не возясь с анимацией.effect.target.style.animationDirection = "reverse" и прочими вещами, которые я ненавижу. Я чувствую, что мне просто не хватает свойства, определяющего направление анимации, которое можно просто проверить и установить.
Единственное, о чем я могу думать, это использовать свойство изображение анимации.effect.target.dataset.playback = "reverse" и добавление правила CSS в таблицу стилей, что, по моему мнению, все еще немного неуклюже.
Вот тот же пример с использованием этого:

Код: Выделить всё

const setDirection = function(value) {
if (document.getAnimations().every(animation => animation.effect.target.dataset.playback != value)) {
for (const animation of document.getAnimations()) {
animation.effect.target.dataset.playback = value;
animation.currentTime = animation.effect.getComputedTiming().duration - animation.currentTime;
}
}
}

const step = function() {
document.getAnimations().forEach(animation => animation.currentTime += 1000);
document.getAnimations().forEach(animation => animation.currentTime = Math.min(animation.currentTime, animation.effect.getTiming().duration));
}

const keybind = {
"ArrowDown": function(event) {
setDirection("normal");
step();
},
"ArrowUp": function(event) {
setDirection("reverse");
step();
}
}
document.body.addEventListener("keydown", (event) => keybind[event.key] && keybind[event.key](event));

Код: Выделить всё

@keyframes slide {
0% {
object-position: top;
}
100% {
object-position: bottom;
}
}

body {
width: 100%;
height: 100%;
overflow:hidden;
}

img {
width: 100%;
height: 256px;
object-fit: cover;
animation-name: "slide";
animation-duration: 5s;
animation-timing-function:linear;
animation-fill-mode:both;
animation-play-state: paused;
}
img[data-playback = "reverse"] {
animation-direction:reverse;
}

Код: Выделить всё

[img]https://i.sstatic.net/eAebw9Zv.jpg[/img]

Как обычно, я в основном ответил на свой вопрос, пока писал его, но я В любом случае я опубликую это на случай, если кто-то в будущем окажется в такой же ситуации. Я хотел бы знать, есть ли более простой способ изменить стиль анимации-направления с помощью javascript, и если нет, то почему это свойство недоступно?

Подробнее здесь: https://stackoverflow.com/questions/792 ... javascript