Возможно ли плавно анимировать с display:none в display:block?

Question

Подскажите, пожалуйста, возможно ли плавно анимировать с display:none в display:block. По факту очень резко появляются элементы и хаотично (то снизу вверх, то наоборот). Хотелось бы чтобы сверху вниз плавно.

Answer 1

Анимировать display не получится, однако вы можете достичь желаемого эффекта с помощью изменения прозрачности и отступа

an-1{
  animation: 1s ease-in-out 0s infinite alternate op;
}
an-2{
  animation: 1s ease-in-out 0s infinite alternate mv;
  display:inline-block;
  position:absolute;
}

an-1, an-2{ font-family:Menlo; font-size:50px; }

@keyframes op {
  0% { opacity:0; }   
  100% { opacity:1; }
}

@keyframes mv {
  0% { left: 10px; }  
  100% { left: 200px; }
}

<an-1>Hello,</an-1> <an-2>World!</an-2>

Также интересных эффектов вы можете добиться с помощью фильтров

an-1{
  animation: 1s ease-in-out 0s infinite alternate op;
}
an-2{
  animation: 1s ease-in-out 0s infinite alternate mv;
  display:inline-block;
  position:absolute;
}

an-1, an-2{ font-family:Menlo; font-size:50px; }

@keyframes op {
  0% {
     filter:blur(50px) opacity(0);
     -webkit-filter:blur(50px) opacity(0);
  }  
  100% {
     filter:blur(0px) opacity(1);
     -webkit-blur(0px) opacity(1);
  }
}

@keyframes mv {
  0% { left: 10px; }  
  100% { left: 200px; }
}

<an-1>Hello,</an-1> <an-2>World!</an-2>

Answer 2

На ответ не претендую, просто хочу внести ясности.

display такое свойство, которое никак не анимируется, но многие встречали, допустим в jQuery, как кодом анимируют состояние display, такими методами как .show()/.hide(), .slideUp()/.slideDown() и т.п.

Разберём появление блока на примере .show() и fadeIn().

.fadeIn() - из display: none переведёт блок в нужное состояние display, при это плавно отобразив его появление (как при смене opacity с 0 на 1).

А вот .show() по сути сделает так же, но ещё и изменит размер.

$('.hidden').delay(1000).show(1000);
$('.hidden1').delay(1000).fadeIn(1000)

.hidden, .hidden1 {display: none;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
  <span class="hidden">Секретный текст</span> <span>обычный текст</span>
</div>

<div>
  <span class="hidden1">Секретный текст</span> <span>обычный текст</span>
</div>

Всё дело в том, что они быстро меняют display: none на нужный, но мы всё так же не видим блок из-за opacity, которое потом и анимируется.

Принцип работы у них следующий:

.fadeIn()

Получаем какое должно быть состояние display
Быстро меняем состояние display, но не отображаем блок opacity: 0
Анимируем opacity с 0 до 1
Финиш.

.show()

В целом такой же как и у .fadeIn(), но к пункту 2 и 3 добавляем ещё и размер width/height

В целом вы можете решить вопрос и на чистом CSS, но без смены статуса, при этом максимально ограничить блок, до его появления, например так:

.fix > span {display: inline-block;}

/* fadeIn() */
.hidden {
  width: 0;
  height: 0;
  opacity: 0;
  overflow: hidden;
  animation: fadeIn 1s 1s forwards;
}

@keyframes fadeIn {
  to {
    width: 115.3px;
    height: 1em;
    opacity: 1;
  }
}

/* show() */
.hidden1 {
  width: 0;
  height: 0;
  opacity: 0;
  overflow: hidden;
  animation: show 1s 1s forwards;
}

@keyframes show {
  0%, 100% {
    width: inherit;
    height: 1em;
  }
  100% {
    opacity: 1;
  }
}

<div class="fix">
  <span class="hidden">Секретный текст</span> <span>обычный текст</span>
</div>

<div class="fix">
  <span class="hidden1">Секретный текст</span> <span>обычный текст</span>
</div>

БЛОГ НА HUSL

Возможно ли плавно анимировать с display:none в display:block?

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

На ответ не претендую, просто хочу внести ясности.