Почему может не работать анимация при переключении display?

Question

Подскажите, почему не работает transition при смене display с none на block:

div {
  background: url('https://im0-tub-ru.yandex.net/i?id=0c60cd2f5cb302aadcbf9af0aac1a1cb&n=13&exp=1');
  background-size: 100%;
  width: 150px;
  height: 150px;
  display: none;
  transform: scale(0.7);
  transition: all 0.2s;
}

div.active {
  display: block;
  transform: scale(1);
}

https://jsfiddle.net/1nubhyqf/

Если убрать стиль display: none;, то анимация воспроизводится.

Answer 1

Потому что у display нет промежуточных состояний - нечего анимировать. Замените на opacity:

jQuery(document).ready(function() {
    jQuery('span').on('click', function() {
    jQuery('div').toggleClass('active');
  });
});

div {
  background: url('https://im0-tub-ru.yandex.net/i?id=0c60cd2f5cb302aadcbf9af0aac1a1cb&n=13&exp=1');
  background-size: 100%;
  width: 150px;
  height: 150px;
  opacity: 0;
  transform: scale(0.7);
  transition: all 0.2s;
}

div.active {
  opacity: 1;
  transform: scale(1);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span>Кнопка</span>
<div></div>

БЛОГ НА HUSL

Почему может не работать анимация при переключении display?

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