1

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

4
  • Можно. Смотрите ответ в этом вопросе
    – xydope
    2 апр 2022 в 0:27
  • Я бы пересмотрел вашу верстку, например в <ul> могут быть только <li>, у вас же еще и дивы. 2 апр 2022 в 2:36
  • Для "спойлеров" я бы вешал слушатель клика на обвертку и использовал делегирование, а искал бы нужный ".active" по атрибуту wrapper.querySelector(`.active[data-content="${this.dataset.title}"]`);. 2 апр 2022 в 2:39
  • на вопросе ru.stackoverflow.com/questions/1396892 прыгает изза горизонального скролбара. кусок блока торчит за экраном. фиксить section {overflow-y:hidden;}
    – eri
    4 апр 2022 в 12:04

2 ответа 2

3

Анимировать 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>

3
  • С помощью opacity не могу, потому что элемент будет занимать место и меня будут дырки на странице, когда элемент скрыт.
    – Stud
    2 апр 2022 в 8:21
  • 1
    @tati да нет же, я же специально показал, как сделать так, чтобы элемент место не занимал) с помощью отступов; можно даже и с помощью негативных отступов (отрицательных)
    – Great Tech
    2 апр 2022 в 11:15
  • Спасибо большое)))))))
    – Stud
    2 апр 2022 в 22:04
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()

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

.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>

1
  • 1
    Спасибо)))) Учту в будущем
    – Stud
    3 апр 2022 в 18:10

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.