CSS3 не работает при запуске Javascript

Question

Я пытаюсь сделать загрузку spla sh с помощью CSS / HTML / JS, но у меня проблемы.

Проблема в том, что пытаюсь заставить исчезнуть экран spla sh с эффектом перехода, но эффект перехода не применяется.

Я уверен, что мой JavaScript работает правильно, поскольку он добавляет новый класс not-displayed к элементу div.

const splash = document.querySelector('.splash');
console.log(splash);
document.addEventListener('DOMContentLoaded', (e) => {
  setTimeout(() => {
    splash.classList.add('not-displayed');
  }, 2000);
});

.splash {
  z-index: 100000;
  position: fixed;
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffff;
}

//all of these code not working
.splash.not-displayed {
  z-index: 20;
  opacity: 0;
  position: fixed;
  height: 100vh;
  width: 100%;
  background-color: #f06c65;
  transition: all 0.5298s ease-out;
  -webkit-transition: all 0.5298s ease-out;
  -moz-transition: all 0.5298s ease-out;
  -o-transition: all 0.5298s ease-out;
}

@keyframes fadein {
  to {
    opacity: 1;
  }
}

.fade-in {
  opacity: 0;
  animation: fadein 1s ease-in forwards;
}

<div class="splash">
  <h1 class="fade-in">
    hello
  </h1>
</div>

Answer 1

Все работает нормально, кроме opacity: 0 классу not-displayed.

const splash = document.querySelector('.splash');
console.log(splash);
document.addEventListener('DOMContentLoaded', (e) => {
  setTimeout(() => {
    splash.classList.add('not-displayed');
  }, 2000);
});

.splash {
  z-index: 100000;
  position: fixed;
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffff;
}


.not-displayed {
  z-index: 20;
/*   opacity: 0; */
  position: fixed;
  height: 100vh;
  width: 100%;
  background-color: #f06c65;
  transition: all 0.5298s ease-out;
  -webkit-transition: all 0.5298s ease-out;
  -moz-transition: all 0.5298s ease-out;
  -o-transition: all 0.5298s ease-out;
}

@keyframes fadein {
  to {
    opacity: 1;
  }
}

.fade-in {
  opacity: 0;
  animation: fadein 1s ease-in forwards;
}

<div class="splash">
  <h1 class="fade-in">
    hello
  </h1>
</div>

Codepen

Answer 2

Здесь происходит две вещи: переход и анимация. Сначала я удалил много ненужного кода CSS, чтобы было понятнее.

Ваш код работает должным образом. Когда страница загружается, классом fade-in запускается анимация «плавного перехода». Текст "hello" постепенно меняется от непрозрачности 0 до непрозрачности 1 в течение секунды, как и ожидалось.

Между тем ваш Javascript срабатывает при загрузке страницы и добавляет класс not-displayed во внешний div через две секунды. Это запускает эффект перехода, который через полсекунды применяет красный фон к div, поскольку он затемняет div, возвращая его непрозрачность 0.

Я не уверен, чего конкретно вы пытаетесь достичь. здесь, но вы соединили успешный переход и эффект анимации.

const splash = document.querySelector('.splash');
console.log(splash);
document.addEventListener('DOMContentLoaded', () => {
  setTimeout(() => {
    splash.classList.add('not-displayed');
  }, 2000);
});

.splash.not-displayed {
  opacity: 0;
  background-color: #f06c65;
  transition: all 0.5298s ease-out;
}

.fade-in {
  opacity: 0;
  animation: fadein 1s ease-in forwards;
}

@keyframes fadein {
  to {
    opacity: 1;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="splash">
  <h1 class="fade-in">
    hello
  </h1>
</div>

Answer 3

В вашем коде

document.addEventListener('DOMContentLoaded', () => {
  setTimeout(() => {
    splash.classList.add('not-displayed');
  }, 2000);
});

вы добавляете новый класс, чтобы удалить .splash, а затем добавляете новый класс not-displayed

Answer 4

Вы должны установить переход на .splash, а не на .splash.not-displayed