Плавный переход от display none к display block
Как сделать плавный "переход от display none к display block". Даже встречал такое мнение, что через css нельзя перейти плавно от 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 block к display
Свои комменты в ожидании переделки!
Когда сделаю не знаю!
Времени нет...
Иначе сообщение будет удалено, вас в бан - все просто!
Но если, сил нет как хочется высказать всё, что вы думаете об этом, пожалуйста - комменты от Vk - форма ниже: