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

Счетчик в график :

Построение гравиков
Основа для графика : счетчик посещаемости.
На отдельной : странице.
dwweb.ru есть здесь:
Последние комментарии :
Марат :
14.03.2023 21:07
Так... это когда было то... в 2018 году... мне не нравится(не нравилось), как поиск по файлам... как-то коряво было…
подробнее.
Moubrey :
14.03.2023 20:52
Их там два можно поставить, еще и по бокам, а в них еще друге окна станут вкладками, обычный проводник и…
подробнее.
Марат :
26.02.2023 12:20
Спасибо за внимательность!
подробнее.
V :
26.02.2023 11:49
В массиве месяцев пропущен октябрь!
подробнее.
Марат :
02.02.2023 10:48
Я не знаю, что это ... Такое понятие - "определена"... я не понимаю, что такое... есть такая фигня в Js, там, бывают…
подробнее.
Артур :
02.02.2023 06:51
При копировании всего кода из 3 главы "Вывод всех файлов из папки ссылками на них", при выполнении скрипта…
подробнее.
ruweb Немного о ruweb.net!
Страница загружена за : 0.023154 секунд. Подробнее