Эффект transition через CSS и JS: за и против

Question

Решаю "решенную" задачу:
анимация fadeIn/fadeOut элемента (который при этом перерисовывается в момент скрытия). Причем все это в цикле.

Во-первых, перекрыл элемент теневым с бОльшим z-index и нужным цветом. Далее есть два(?) пути:
анимация opacity тени на чистом JS+canvas, либо CSS-transition.

Путь через JS не вызвал вопросов, причем использовал достаточно современные средства: requestAnimationFrame, async/await. Все работает, и в цикле.

Но попалось мнение, что более правильной и эффективной является анимация через CSS. Ок, но тут начинаются танцы с бубнами. Оказывается, не получится просто:

elem.style.transition = "opacity 1s linear 0s";
elem.style.opacity = 1;

Хотя этот код часто копипастят. Нужно через добавление класса:

.fade {
transition: opacity 1s linear 0s;
}

elem.classList.add('fade');
elem.style.opacity = 1;

Ну хорошо. Но из-за неопределенности во времени прорисовки собственно рисунка (да и из общего принципа кода) хотелось бы использовать async/await. Но не тут то было. Если создать промис:

function fade() {
    return new Promise(resolve => {
        elem.classList.add('fade');
        elem.opacity = 1;
        resolve('Done fade');
    });
}

то он не работает с await. Явно открыл велосипед: css-transition никак не взаимодействуют c js-promise-await.
Полковника никто не ждет.
Сохранить async-стиль можно, только добавляя в fade() setTimeout(), что вообще лишает смысла работу с CSS, потому что кода получается даже больше, чем с requestAnimationFrame на чистом JS.

Склоняюсь остановиться на JS-анимации, но возможно, как-то неправильно понял взаимодействие CSS и async/await. Тем более, что CSS предоставляет широкие встроенные возможности по кривой анимирования, а это очень удобно.

UPD. Вот здесь используют TweenMax. Видно, что методы этого фреймворка дружат с async/await. Просто моя задача скорее учебная - хотелось бы сделать без библиотек, чисто. И пусть современными, но не экспериментальными средствами.

Answer 1

Но вы ведь во втором примере изобретаете CSS. В чём проблема задать все необходимые вам действия на некий css класс ?

let a = document.getElementsByClassName('block')[0];
a.addEventListener("click", function() {
  this.classList.add("active");
});

body {
  margin: 0;
}

.block {
  width: 150px;
  height: 150px;
  margin: 40px;
  background-color: pink;
}

.active {
  animation: fadeIn 1s;
  animation-fill-mode: forwards;
}

@keyframes fadeIn {
  0% {
    opacity: 1
  }
  100% {
    opacity: 0
  }
}

<div class="block"></div>

БЛОГ НА HUSL

Эффект transition через CSS и JS: за и против

Ответы (1 шт):