Подскажите, пожалуйста, возможно ли плавно анимировать с display:none в display:block. По факту очень резко появляются элементы и хаотично (то снизу вверх, то наоборот). Хотелось бы чтобы сверху вниз плавно.
2 ответа
Анимировать 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>
-
С помощью opacity не могу, потому что элемент будет занимать место и меня будут дырки на странице, когда элемент скрыт.– Stud2 апр 2022 в 8:21
-
1@tati да нет же, я же специально показал, как сделать так, чтобы элемент место не занимал) с помощью отступов; можно даже и с помощью негативных отступов (отрицательных) 2 апр 2022 в 11:15
-
На ответ не претендую, просто хочу внести ясности.
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>
-
1
<ul>
могут быть только<li>
, у вас же еще и дивы.wrapper.querySelector(`.active[data-content="${this.dataset.title}"]`);
.section {overflow-y:hidden;}