Как заставить анимацию css воспроизводиться вперед или назад по запросу

У меня есть css-анимация, в которой в зависимости от ситуации я хочу иметь возможность переключаться вперед или назад в любое время на основе некоторого JS. Вот простой пример:

html

<div id = "box"></div>
<button onclick = "toggle()">toggle</button>

window.isSmall = true;
window.toggle = function() {
    if (isSmall) {
    var el = document.getElementById("box");
    el.classList.add("bigger");
  } else {
    // ????
  }
  isSmall = !isSmall;
}

css

@keyframes bigger {
    from { width:100px; height:100px; }
    to { width:200px; height:200px; }
}

#box {
    width:100px;
    height:100px;
    background-color: red;
}

.bigger {
    animation-name: bigger;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

Рабочий пример: http://jsfiddle.net/gbh408up/

Я думал, что это будет довольно просто, но, к удивлению, я не смог найти способ сделать это. Обратите внимание, я специально ищу решение с анимацией, а НЕ переходами. Любые идеи?

наверное 2 анимации?

— 29.08.2018 22:37

И почему вы хотите использовать молоток, когда вам нужна отвертка?

— 30.08.2018 08:19

javascript html css css-animations

29.08.2018 22:23

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Вы можете работать с 2 классами, которые оживляют то, что требуется.

window.isSmall = true;
window.toggle = () => {
  const box = document.getElementById("box");
  if (isSmall) {
    box.classList.remove("smaller");
    box.classList.add("bigger");
  } else {
    box.classList.remove("bigger");
    box.classList.add("smaller");
  }
  isSmall = !isSmall;
  console.info(isSmall)
}

@keyframes bigger {
  from {
    width: 100px;
    height: 100px;
  }
  to {
    width: 200px;
    height: 200px;
  }
}

@keyframes smaller {
  from {
    width: 200px;
    height: 200px;
  }
  to {
    width: 100px;
    height: 100px;
  }
}

#box {
  width: 100px;
  height: 100px;
  background-color: red;
}

.bigger {
  animation-name: bigger;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

.smaller {
  animation-name: smaller;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

<div id = "box"></div>
<button onclick = "toggle()">toggle</button>

Ха, это забавно, я думал, что уже пробовал это, но я, должно быть, нащупал что-то по пути и пропустил это. Это здорово, спасибо!

— 29.08.2018 22:56

29.08.2018 22:38

Я только что закончил разбираться в этом. Итак, вот мое решение:

<div id = "box"></div>

<button onclick = "toggle()">toggle</button>

window.isSmall = true;
window.toggle = function() {
    var el = document.getElementById("box");
    if (el.className == "a") {
    el.className = "b";
    } else {
    el.className = "a";
  }
  isSmall = !isSmall;
  console.info('toggle');
 }


@keyframes a {
    from { width:100px; height:100px; }
    to { width:200px; height:200px; }
}
@keyframes b {
    from { width:200px; height:200px; }
    to { width:100px; height:100px; }
}

#box {
    width:100px;
    height:100px;
    background-color: red;
}

.a {
    animation-name: a;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}
.b {
  animation-name: b;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

Я изменил «больше» на просто «а», а мое «меньшее» на просто «б». Но это работает. Хорошо, теперь он у меня на скрипке.

https://jsfiddle.net/markem/2b6n3gmc/1/

Кроме того, здесь, в StackOverflow, был дан ответ на этот вопрос:

Javascript простой добавить класс удалить класс

29.08.2018 23:54