1

Решаю "решенную" задачу:
анимация 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. Просто моя задача скорее учебная - хотелось бы сделать без библиотек, чисто. И пусть современными, но не экспериментальными средствами.

2
  • А код внутри промиса знает об элементе что-то вообще? 7 окт 2022 в 19:05
  • Да, конечно. Пока все это отлаживается, dom-элементы являются глобальными константами. Потом в классы можно убрать. Проблема именно в том, что css-таймауты не являются таковыми для JS, проверил разными способами
    – lesobrod
    8 окт 2022 в 7:51

1 ответ 1

0

Но вы ведь во втором примере изобретаете 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>

1
  • Спасибо, ваш пример мне помог, уточнил понимание @keyframes. Но в данном проекте стоит задача все реализовать через async-await. И transition никакими ухищрениями с асинхронностью не дружит, только если обернуть в setTimeout, что является тавтологией.
    – lesobrod
    21 окт 2022 в 11:42

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.