СКРИПТЫ
ТЕГИ:
php (325)
js (242)
html (146)
css (130)
html tags (62)
js tag (56)
jquery (42)
text (37)
js method (36)
php array (33)
js date (33)
form html (30)
online (28)
fonts (26)
link (26)
Показать еще :
ruweb.net (25)
foto (22)
php file (20)
atom (20)
forum (19)
svg (18)
input (18)
hosting (18)
php date (17)
html book (16)
php time (16)
board (16)
color (15)
js url (14)
img (14)
js events (14)
js time (14)
info (13)
select (13)
osclass (13)
htaccess (13)
notepad (13)
знак (12)
php path (12)
keyboard (12)
php img (12)
download (12)
table (12)
dw block (12)
jsphp (11)
form (11)
icon (11)
yandex (10)
mouse (10)
js delete (10)
keyframes (10)
hover (9)
dosite (8)
browser (7)
cookie (7)
comment (7)
php url (7)
php get (6)
click (6)
mysql (6)
canvas (6)
list (6)
iframe (6)
js math (5)
reg.ru (5)
adminka (5)
mb (5)
heading (5)
tag a (5)
chart (5)
search (5)
ftp (5)
year (5)
js id (5)
value (5)
base64 (4)
day (4)
нок (4)
flags (4)
week (4)
xml (4)
scandir (4)
ssl (4)
bbcode (4)
php var (4)
games (4)
console (4)
js form (4)
vk (4)
pages (4)
submit (4)
month (4)
symbols (4)
task (4)
https (3)
js hash (3)
js post (3)
domen (3)
money (3)
vs code (3)
куб (3)
js img (3)
ucoz (3)
padding (3)
captcha (3)
numbers (3)
line (3)
tag hr (2)
qr kod (2)
youtube (2)
video (2)
рся (2)
sitemap (2)
counter (2)
details (2)
prompt (2)
typeof (2)
google (2)
height (2)
arrows (2)
seo (2)
js vars (2)
smile (1)
scroll (1)
speed (1)
нод (1)
archive (1)
header (1)
windows (1)
rutube (1)
jino (1)
cursor (1)

Плавный переход от 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 и обратно!


  1. Как сделать плавный переход от 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;
    }

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


  2. Пример плавный переход от 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; происходит рывком! Давайте это исправим!









  3. Почему не работает плавный переход от 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! Найдёте... напишите в комментах...


  4. Как сделать плавный переход от 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 и обратно!

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

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


  5. Как сделать плавный переход от 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 и обратно".

Не благодарите, но ссылкой можете поделиться!
Временная ссылка для быстрейшей индексации : список всех квадратных корней.
Теги :
display: none плавно
display none плавное
плавный display none css
display none плавное появление
jquery display none плавно
плавное появление блока display none
css плавное появление блока display none
как сделать плавным display none
Еще никто не прокомментировал! COMMENTS+   BBcode
Подписаться + =

ruweb dwweb.ru есть здесь:
Последние комментарии :
Марат :
15.08.2023 17:50
Значит в "maxv" сидит…
подробнее.
михаил :
15.08.2023 16:53
а если это сделано для диаграммы values / maxv)…
подробнее.
Марат :
17.07.2023 15:50
Спасибо за интересный вопрос! Посмотрите …
подробнее.
Александр :
17.07.2023 14:58
а как сделать чтобы при повторном клике значение value возвращалось к…
подробнее.
Марат :
30.06.2023 10:18
Спасибо за внимательность!
подробнее.
???? :
29.06.2023 15:37
Прямоугольник - это геометрическая фигура, у которой три угла…
подробнее.
Немного о ruweb.net!
Страница загружена за : 0.020077 секунд. Подробнее