Задать вопрос
@kr_ilya
javascript

Почему transition не срабатывает при скрытии элемента?

Блок с transition opacity появляется медленно, а исчезает мгновенно. Почему не срабатывает transition и на скрытие элемента?

КОД
html
<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="src/styles.css" />
  </head>

  <body>
    <div id="app">
      <div id="block" class="hiddenBlock">
        <h1>qwerty</h1>
      </div>
      <button id="but" data-opened="0">Toggle</button>
    </div>

    <script src="src/index.js"></script>
  </body>
</html>


css
body {
  font-family: sans-serif;
}

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

.visibleBlock {
  opacity: 1;
  visibility: visible;
}

#block {
  width: 250px;
  height: 250px;
  background: #eee;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}


js
let showBtn = document.getElementById("but");
showBtn.addEventListener("click", show);

function show() {
  let blockEl = document.getElementById("block");
  blockEl.classList.remove("hiddenBlock");
  blockEl.classList.add("visibleBlock");

  if (this.dataset.opened === "0") {
    blockEl.classList.remove("hiddenBlock");
    blockEl.classList.add("visibleBlock");
    this.dataset.opened = 1;
  } else {
    blockEl.classList.remove("visibleBlock");
    blockEl.classList.add("hiddenBlock");
    this.dataset.opened = 0;
  }
}


Песочница
  • Вопрос задан
  • 239 просмотров
Комментировать
Подписаться 1 Простой Комментировать
Решения вопроса 2
@ForSureN1
frontend dev
Потому что visible это равносильно display, есть 2 состояния, виден и невиден, промежуточных значений нет, соответственно transition работать не будет.
если хотите чтобы и при скрытии с задержкой работало нужно использовать animate
let animateBlock = blockEl.animate([
    {opacity: 1},
    {opacity: 0}
], {duration: 300, easing: 'ease-in-out', fill: 'forwards'});
animateBlock.addEventListener('finish', () => { blockEl.classList.add('hiddenBlock') })
Ответ написан
Комментировать
Комментировать
mizutsune
@mizutsune
Frontend Developer
Для начала несколько рекомендаций:

1. Следует отказаться от стилизации элементов по ID селектору, потому что это считается плохой практикой.
2. Для простой функции переключения класса у элемента, не нужно столько кода.

Почему transition не срабатывает при скрытии элемента?


- transition: opacity 0.3s;
+ transition: opacity 0.3s, visibility 0.3s;


При комбинированном использовании свойств opacity и visibility, следует указывать оба свойства в transition, желательно с одинаковым временем перехода от одного состояния к другому.

CSS и JS можно сократить и привести к нормальному виду.


CSS:

.block {
    width: 250px;
    height: 250px;
    background: #eee;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
  }

  .block-active {
    opacity: 1;
    visibility: visible;
  }


JS:

function show() {
    const element = document.getElementById("block");
    element.classList.toggle("block-active");
  }


Или:

function show() {
     const element = document.getElementById("block");

     switch (Boolean(element.classList.contains("block-active"))) {
          case false:
               return element.classList.add("block-active");
          case true:
               return element.classList.remove("block-active");
     }
}
Ответ написан
5 комментариев
5 комментариев
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
SummerWeb • Ярославль
от 100 000 до 140 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Middle JavaScript Developer
AppsTrain.io
от 80 000 до 180 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Создать 3D модель для мобильного приложения
03 мая 2024, в 20:03
5000 руб./за проект
Дизайн для доработки музыкального мобильного приложения
03 мая 2024, в 20:02
43000 руб./за проект
Дизайн мобильного приложения гитарного тюнера
03 мая 2024, в 19:53
30000 руб./за проект
Ещё заказы