В связи с переходом на новый движок... возможны сбои в работе! Простите!
Работы производятся прямо сейчас 19-03-2024! 🞨
Меню :
keyframes (10)
css (131)



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

Не стесняемся говорить спасибо!
Помочь проекту DwWeb.ru

Поделиться ссылкой! C друзьями или врагами!

Этим вы очень поможете проекту! Заранее огромное спасибо!

Ещё : dwweb.ru есть здесь:
ruweb
Все статьи авторские, при копироавании активная ссылка обязательна DwWeb.ru! © 2015 - 2024 Контакты. Реклама на сайте Лучший хостинг : RUWEB + помощь по RUWEB
Страница загружена за : 0.02337 секунд. Подробнее