Preloader плавный переход

Question

Пытаюсь реализовать плавный прелоадер на странице,

добавляю новый класс который плавно скрывает пейлоадер,

document.body.onload = function() {

  setTimeout(function() {
    var preloader = document.getElementById('loader-wrapper');
    if (!preloader.classList.contains('done')) {
      preloader.classList.add('done')
    }
  }, 3000)
}

.done {
  opacity: 0;
  visibility: hidden;
}

<div id="loader-wrapper">
  <div id="loader"></div>
</div>

после прохождения пейлоадера загруженная страница не доступна к взаимодействию, пробовал добавить display: none это решает вопрос с взаимодействием, но, не применяется анимация плавности, Просьба, подсказать как можно решить данный вопрос

Answer 1

Достаточно добавить селектор статуса, сделать анимацию, и с js по animationend-событию переключать display. Или на любителя, через transitionend

const animated = document.querySelector('.animOpacity');

    animated.onanimationend = () => {
    className.classList.remove('animOpacity')
};

БЛОГ НА HUSL

Preloader плавный переход

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