Плавный переход от display none к display block
Плавно переходим от display none к display block и обратно!
- Как сделать плавный переход от display none к display block!
- Пример плавный переход от display
none к display block! - Почему не работает плавный переход от display block к display
none ! - Как сделать плавный переход от display
none к display block и обратно! - Как сделать плавный переход от display block к display
none и обратно!
Как сделать плавный переход от display none к display block!
Для того, чтобы сделать"плавный переход от display none к display block" вам понадобится:Нам нужен тег - пусть это будет div добавим произвольный class
Добавим руку при наведении...
Далее нам понадобится hover при наведении на open:
.open:hover~.example{display: block; animation: shows 1s;}
Добавляем к "shows" keyframes прописываем opacity от 0 к 1.
@keyframes shows {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
Стили для скрытого блока:
.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: block; происходит рывком! Давайте это исправим!
Почему не работает плавный переход от display block к display none !
К сожалению средствами "css" выполнить от display block к display Использование opacity вместо перехода от display block к display none
Если используем "keyframes" + "opacity", то блок замечательно скрывается, но вместо блока остается пустое место, поскольку он всё еще... "display block"
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
И второй не работающий пример от display block к display none
Ответ: не работает плавный переход от display block к display none !
Как видите, что два представленных варианта не работают!
Вы можете поискать, есть ли вообще какой-то способ "плавного перехода от display block к displayКак сделать плавный переход от display block к display none и обратно!
Итак... из выше приведенной теории и практики, вы должны были понять, что из "none" в "block" можно попасть с помощью CSS, но вот переход из "block" в "none" этого сделать нельзя(в смысле плавно!) и поэтому вам/мне понадобится :
Возьмем уже готовое решение плавного перехода от display
Далее... нам потребуется js... когда мышка будет покидать(mouseout) блок "Переход от display none к display block и обратно." переименуем
"hide_slowly" добавим анимацию, которая у нас работала(см.выше... ):
0% { opacity: 1 }
100% { opacity: 0 }
После того, как пройдет секунда отработает setTimeout переименуем в начальное... из id=hide_slowly в id=example_2
Пример плавного перехода от display none к display block и обратно!
Теперь осталось собрать весь код вместе:
Скачать скрипт плавного перехода от display none к display block и обратно!
Скачать здесьВ архиве приведенный пример на отдельной странице.
Как сделать плавный переход от display block к display none и обратно!
Теперь давайте решим противоположную задачку - "плавный переход от display block к display При наведении на первый блок (<div id="open_3">) будем использовать mouseover:
Очищаем все классы с помощью className
Добавляем класс, который будет иметь "keyframes" от 1 к 0:
0% { opacity: 1 }
100% { opacity: 0 }
Далее прибавляем еще один класс - "display_none" с задержкой 1 секунда с помощью "setTimeout":
При покидании мышки с блока "<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: none плавно
display none плавное
плавный display none css
display none плавное появление
jquery display none плавно
плавное появление блока display none
css плавное появление блока display none
как сделать плавным display none

подробнее.
подробнее.