Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 03.12.2021, 11:47
BSI BSI вне форума
Аспирант
Отправить личное сообщение для BSI Посмотреть профиль Найти все сообщения от BSI
 
Регистрация: 01.06.2013
Сообщений: 48

Плавный показ и плавное скрытие картинки.
Всем привет. Подскажите как грамотно сделать плавное скрытие картинки gif. Как сделать плавный показ картинки мне понятно, в стилях вот этот код
#rybak {
grid-row: 1;
grid-column: 1 / span 8;
transform: scale(0.8);
position: relative;
margin-top: 6em;
margin-left: -1em;
opacity:0; 
transition: 2s; 
animation: show 2s 1; 
animation-fill-mode: forwards; 
animation-delay: 3s; 
  } 
@keyframes show{
0%{
opacity:0;
}
100% {
opacity:1;
}
}


а вот как его так же плавно скрыть через, скажем 10 сек., не получается. Навыки в css минимальные. Нашел JS
setTimeout(function(){
	document.getElementById('rybak').style.display = 'none';
}, 1000);
для скрытия картинки, но там скрытие происходит мгновенно, а не плано. Всем спасибо.
Ответить с цитированием
  #2 (permalink)  
Старый 03.12.2021, 12:16
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от BSI
как его так же плавно скрыть через, скажем 10 сек
Место "под картинкой" будет оставаться?
Или придется делать так как будто ее и не было?
Ответить с цитированием
  #3 (permalink)  
Старый 03.12.2021, 12:19
BSI BSI вне форума
Аспирант
Отправить личное сообщение для BSI Посмотреть профиль Найти все сообщения от BSI
 
Регистрация: 01.06.2013
Сообщений: 48

Cделать так как будто ее и не было.
Ответить с цитированием
  #4 (permalink)  
Старый 03.12.2021, 12:38
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

BSI,
<!DOCTYPE html>
<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        #rybak {
            grid-row: 1;
            grid-column: 1 / span 8;
            transform: scale(0.8);
            position: relative;
            margin-top: 6em;
            margin-left: -1em;
            opacity: 0;
            transition: 2s;
            animation: show 14s 3s;
            animation-fill-mode: forwards;
            background-color: #FF0000;
            height: 100px;
        }
        @keyframes show {
            0%,
            100% {
                opacity: 0;
            }
            20%,
            90% {
                opacity: 1;
            }
        }
        #rybak.hide {
            display: none;
        }
    </style>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const elem = document.querySelector("#rybak");
            elem.addEventListener("animationend", function(event) {
                elem.classList.add("hide")
            });
        });
    </script>
</head>
<body>
    <div id="rybak"></div>
</body>
</html>
Ответить с цитированием
  #5 (permalink)  
Старый 03.12.2021, 12:58
BSI BSI вне форума
Аспирант
Отправить личное сообщение для BSI Посмотреть профиль Найти все сообщения от BSI
 
Регистрация: 01.06.2013
Сообщений: 48

РОНИ, огромное спасибо за быстрый ответ. Всё работает. Бай Бог Вам долгих лет. Как бы это же реализовать с помощью CSS ?
Ответить с цитированием
  #6 (permalink)  
Старый 03.12.2021, 13:14
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от BSI
Как бы это же реализовать с помощью CSS ?
В ЦСС можно выполнить несколько анимаций... Так же можно указывать задержку перед началом анимации...
Можно указать в одной анимации больше кадров и действий в них...

Но есть ограничение - не все свойства анимируются.
К таким относится свойство display.
Ответить с цитированием
  #7 (permalink)  
Старый 03.12.2021, 15:38
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от ksa
В ЦСС можно выполнить несколько анимаций... Так же можно указывать задержку перед началом анимации...
Вот примерчик...
Картинка появляется... Потом пауза в 5 секунд. Потом скрывается.
Но так "место остается" от нее.
Убирать нужно как показали выше.
<style>
#rybak {
	animation: show 5s ease 1s, hide 2s ease 5s; 
	animation-fill-mode: forwards; 
	opacity:0;
 } 
@keyframes show{
	0%{
		opacity:0;
	}
	100% {
		opacity:1;
	}
}
@keyframes hide{
	0%{
		opacity:1;
	}
	100% {
		opacity:0;
	}
}
</style>
<img id='rybak' src='https://javascript.ru/forum/images/ca_serenity/misc/logo.gif' />
Ответить с цитированием
  #8 (permalink)  
Старый 03.12.2021, 15:49
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Как вариант "убирать" меняя размеры в ноль...
<style>
.container {
	display: inline-block;
	padding: 10px;
	background-color: silver;
}
#rybak {
	animation: show 5s ease 1s, hide 3s ease 5s; 
	animation-fill-mode: forwards; 
	opacity:0;
 } 
@keyframes show{
	0%{
		opacity:0;
	}
	100% {
		opacity:1;
	}
}
@keyframes hide{
	0%{
		opacity:1;
	}
	99% {
		opacity:0;
	}
	100% {
		width:0;
		height:0;
	}
}

</style>
<div class='container'>
	<img id='rybak' src='https://javascript.ru/forum/images/ca_serenity/misc/logo.gif' />
</div>
Ответить с цитированием
  #9 (permalink)  
Старый 03.12.2021, 16:31
BSI BSI вне форума
Аспирант
Отправить личное сообщение для BSI Посмотреть профиль Найти все сообщения от BSI
 
Регистрация: 01.06.2013
Сообщений: 48

ksa, большое спасибо за участие в ответе на мой вопрос. Сейчас буду пробовать ваши варианты. Мне не понятно, для чего в ответе у рони установлен JS, вроде бы и без него всё работает. Прошу строго не судить за мои вопросы, знаний у меня практически нет. Всем ещё раз огромное спасибо.

Последний раз редактировалось BSI, 03.12.2021 в 16:34.
Ответить с цитированием
  #10 (permalink)  
Старый 03.12.2021, 16:37
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от BSI
Мне не понятно, д
js устанавливает элементу display: none; без js это не сделать.
строки 39 и 32 пост #4
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Скрытие - показ элементов Янковиц Элементы интерфейса 2 18.12.2017 12:43
Плавное увеличение / уменьшение картинки. Бесконечный цикл. LLIypuk jQuery 1 11.04.2017 10:31
Как сделать плавное перемещение картинки ArsenInvoker Элементы интерфейса 21 07.03.2015 13:25
Плавное появление картинки в слайд-шоу Alex351960 Элементы интерфейса 1 08.08.2013 17:01
плавное появление картинки marlic Элементы интерфейса 1 12.03.2011 15:36