Почему не срабатывает анимация при исчезновение?

Question

[Дмитрий Ярощук]

При добавление класса active блоку popup_engineer, анимация срабатывает но при исчезновение данного класса, анимация не срабатывает

<div class="popup_engineer">
        <div class="popup_dialog">
            <div class="popup_content text-center">
                <button type="button" class="popup_close"><strong>&times;</strong></button>
                <div class="popup_form">
                    <form class="form" action="#">
                      <h2>Запишитесь сегодня на <br><span>бесплатный замер</span></h2>
                      <input class="form-control form_input" name="user_name" required type="text" placeholder="Введите ваше имя">
                      <input class="form-control form_input" name="user_phone" required type="text" placeholder="Введите телефон">
                      <button class="text-uppercase btn-block button" name="submit" type="submit">Вызвать замерщика!</button>
                      <p class="form_notice">Ваши данные конфиденциальны</p>
                    </form>
                </div>
            </div>
        </div>
    </div>

.popup_engineer {
  display: block;
  position: fixed;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9;
  background-color: rgba(0, 0, 0, 0.5);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity ease-in 0.4s, top ease-out 0.4s;
}

.popup_engineer.active {
  top: 0;
  opacity: 1;
  visibility: visible;
}
.popup_engineer_content {
  position: fixed;
  top: 10%;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 40rem;
  background-color: #ffffff;
}

Comments

[Виталий Першин]

Попробуй для теста transition: 0.4s all; вместо transition: opacity ease-in 0.4s, top ease-out 0.4s;

[Николай]

.popup_engineer {
  ....
  visibility: hidden;
  transition: opacity ease-in 0.4s, top ease-out 0.4s; visibility 0s linear .4s;
}

.popup_engineer.active {
  ....
  transition: opacity ease-in 0.4s, top ease-out 0.4s;
  visibility: visible;
}

Answer 1

[Сергей delphinpro]

Потому что свойство visibility - дискретное. У него между значениями hidden и visible нет промежуточных значений (по типу visible 0.5, visible 0.7).
Когда элемент становится visible, у него opacity = 0 и дальше анимация работает на opacity
Когда элемент скрывается, у него visibility мгновенно становится hidden, и он скрывается, там нечего анимировать.

Решение тут видится с использованием javascript
Вы можете слушать событие transitionend, чтобы выключать дискретные свойства по окончанию анимации, а не сразу.

Comments

[IvanU7n]

для visibility прописано как оно должно интерполироваться между visible и hidden: https://developer.mozilla.org/en-US/docs/Web/CSS/v...

а проблема именно в том, что visibility нет в transition-property