Как составить JS-события и тайминги перехода CSS?

пример

  1. Функция Javascript добавляет некоторый CSS-класс в HTML-элемент.
  2. Из-за этого элемент HTML начинает анимировать свои стили (скрываться) transition.
  3. После того, как он скрывается, мы хотим выполнить другую функцию JS, чтобы добавить другой класс CSS в другой элемент и сделать его видимым.

Проблема в том, что функции JS-кода, но анимации - CSS.

Как использовать одинаковые значения времени для кода JS и CSS? Я хочу следовать DRY и получить только один источник истины.

Является ли это возможным?

javascript,css,animation,

0

Ответов: 2


2 принят

Магия transitionend

То, что вы ищете, - это использовать прослушиватель событийtransitionend после добавления класса с помощью.classList.add

element.classList.add('yourTransitionAnimationClass')
element.addEventListener('transitionend', callbackFunction)

0

jquery для временных переходов css и прослушивателя событий javascript.

.class_one {

  transition:1s

}
.class_two {

  transition:1s;
  transition-delay:1s;
}

//jquery function
 $('button').click(function(){
   $(this).addClass('class-one class-two');
 });

Использование задержки перехода позволяет вам время, когда ваши переходы выполняются последовательно.

JavaScript, CSS, анимации,
Похожие вопросы