Плавный переход от display none к display block

Как сделать плавный "переход от display none к display block". Даже встречал такое мнение, что через css нельзя перейти плавно от display none к display block и обратно!

Плавно переходим от display none к display block и обратно!

1. Как сделать плавный переход от display none к display block!
2. Пример плавный переход от display none к display block!
3. Почему не работает плавный переход от display block к display none!
4. Как сделать плавный переход от display none к display block и обратно!
5. Как сделать плавный переход от display block к display none и обратно!

Как сделать плавный переход от display none к display block!

Для того, чтобы сделать"плавный переход от display none к display block" вам понадобится:

Нам нужен тег - пусть это будет div добавим произвольный class

<div class=open>наведи на меня.</div>

Добавим руку при наведении...

.open{cursor: pointer;}

Эффект hover

Далее нам понадобится hover при наведении на open:

.open:hover~.example{display: block; animation: shows 1s;}

Добавляем к "shows" keyframes прописываем opacity от 0 к 1.

@keyframes shows {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

Второй div:

<div class=example>Переход плавный от display none к display block</div>

Стили для скрытого блока:

.example{ display:none ;
background: #033d70;
color: white;
text-align: center;
padding: 10px;
}

Соберем весь код:




Пример плавный переход от display none к display block!

Выше мы разобрали код "плавного перехода от display none к display block" - давайте его соберем в одно целое:

Код css + Html "плавный переход от display none к display block"

Html:

<div class=open>наведи на меня.</div>

<div class=example>Переход плавный от display none к display block</div>

Css:

<style>

.open{cursor: pointer;}

.example{ display:none;

background: #033d70;

color: white;

text-align: center;

padding: 10px;

}

.open:hover~.example{display: block; animation: shows 1s;}

@keyframes shows {

from {

opacity: 0;

}

to {

opacity: 1;

}

}

</style>

Пример "плавного перехода от display none к display block"

Выведем весь код "плавного перехода от display none к display block" прямо здесь. Чтобы увидеть данный эффект наведите мышку на слова "наведи на меня."

наведи на меня.
Переход плавный от display none к display block

Но..!

Как видим... возвращение блока к display: block; происходит рывком! Давайте это исправим!












Почему не работает плавный переход от display block к display none!

К сожалению средствами "css" выполнить от display block к display none не получится... я по крайней мере не знаю такого способа!

Использование opacity вместо перехода от display block к display none

Если используем "keyframes" + "opacity", то блок замечательно скрывается, но вместо блока остается пустое место, поскольку он всё еще... "display block"

наведи на меня 2.
Переход плавный от display block к display none
Html:

<div class="star_0">наведи на меня 2.</div>

<div class="star_hover_0">Переход плавный от display block к display none </div>

Css:

<style>

@keyframes hide_0{

0% { opacity: 1 }

100% { opacity: 0 }

}

@-webkit-keyframes hide_0{

0% { opacity: 1 }

100% { opacity: 0 }

}

.star_0:hover ~ .star_hover_0{

animation-name: hide_0;

animation-duration: 1s;

animation-fill-mode: forwards;

-webkit-animation-name: hide_0 ;

-webkit-animation-duration: 1s;

-webkit-animation-fill-mode: forwards;

}

</style>

Плавный переход от display block к display none не работает...!

Теперь... самое логичное использовать предыдущий код, но только заменим в нем( 1).естественно animation-name) +

0% { opacity: 1 }

100% { opacity: 0 }

На:

from {display: block;}

to {display: none;}

Либо на:

0% { display: block }

100% { display: none }

Не работающий пример от display block к display none

наведи на меня "from...to"
Переход плавный от display block к display none

И второй не работающий пример от display block к display none

наведи на меня 0% -> 100%
Переход плавный от display block к display none

Ответ: не работает плавный переход от display block к display none!

Как видите, что два представленных варианта не работают!

Вы можете поискать, есть ли вообще какой-то способ "плавного перехода от display block к display none" на чистом css! Найдёте... напишите в комментах...




Как сделать плавный переход от display block к display none и обратно!

Итак... из выше приведенной теории и практики, вы должны были понять, что из "none" в "block" можно попасть с помощью CSS, но вот переход из "block" в "none" этого сделать нельзя(в смысле плавно!) и поэтому вам/мне понадобится :

Возьмем уже готовое решение плавного перехода от display none к display block из этого пункта.

Js

Далее... нам потребуется js... когда мышка будет покидать(mouseout) блок "Переход от display none к display block и обратно." переименуем

Из id=example_2 в id=hide_slowly

"hide_slowly" добавим анимацию, которая у нас работала(см.выше... ):

0% { opacity: 1 }

100% { opacity: 0 }

После того, как пройдет секунда отработает setTimeout переименуем в начальное... из id=hide_slowly в id=example_2

Пример плавного перехода от display none к display block и обратно!

Теперь осталось собрать весь код вместе:

Переход от display none к display block и обратно.
Переход плавный от display none к display block

Скачать скрипт плавного перехода от display none к display block и обратно!

Скачать здесь Что в архиве?

В архиве приведенный пример на отдельной странице.




Как сделать плавный переход от display block к display none и обратно!

Теперь давайте решим противоположную задачку - "плавный переход от display block к display none и обратно" для этого вам понадобится(программирование - это возможность решать задачки множеством способов)...

При наведении на первый блок (<div id="open_3">) будем использовать mouseover:

Очищаем все классы с помощью className

Добавляем класс, который будет иметь "keyframes" от 1 к 0:

0% { opacity: 1 }

100% { opacity: 0 }

Далее прибавляем еще один класс - "display_none" с задержкой 1 секунда с помощью "setTimeout":

.display_none{display: none }

При покидании мышки с блока "<div id="open_3">"используем mouseout

Опять очищаем все классы с помощью className="".

И добавляем класс "show_slowly_1", который будет иметь "keyframes" от 0 к 1:

0% { opacity: 0 }

100% { opacity: 1 }

Пример плавного перехода от display block к display none и обратно!

Далее... разместим приведенную теорию прямо здесь:

Переход от display block к display none и обратно.
Переход плавный от display block к display none

Скачать пример плавного перехода от display block к display none и обратно!

Скачать можно здесь Что в архиве?

В архиве приведенный пример "плавного перехода от display block к display none и обратно".