Появление блока через JS?

Question

art style @arttstyle

web-макака

JavaScript

Появление блока через JS?

есть условный блок .block1
у него display:none и opacity:0
я хочу:
1.поменять на display:flex
2. плавно изменить opacity в течении 0.5 секунд с 0 до 1
3.выполнить стороннюю функцию
4.плавно поменять opacity с 1 до 0 за 0.5сек
5.display:none
и на время анимации заблокировать кнопку .button1
как это сделать? попробовал через classlistt add remove делать, играя с css классами, так ничего не получилось. стало быть надо делать анимацию на чистом JS?

Вопрос задан более трёх лет назад
202 просмотра

2 комментария

Подписаться 1 Простой 2 комментария

Решения вопроса 1

Комментировать

Пригласить эксперта

Ответы на вопрос 1

4 комментария

art style @arttstyle Автор вопроса

если менять с display:none на display:flex то transition не будет работать
можно поменять на display:flex opacity 0 но тогда придется опять делать анимацию, а делать надо через JS setinterval

Написано более трёх лет назад
ArtGMlg @ArtGMlg

В таком случае можно блок оставить со свойством display flex, но изначально записать visibility hidden, а затем заменить на visibility visible

Написано более трёх лет назад
art style @arttstyle Автор вопроса
switchLangButton.addEventListener("click", function() { switchLanganimation.style.display = "flex"; setInterval(function() { switchLanganimation.style.opacity = "1"; }, 250) });

как то вот так надо но это после 250 мс он сразу врубает Opacity 1 а не плавно
Написано более трёх лет назад

ArtGMlg @ArtGMlg

Хм...
Ну как вариант могу предложить вот такой костыльный способ:

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		#hiddenBlock{
			display: none;
			opacity: 0;
			transition: all .25s linear;
		}
	</style>
</head>
<body>
	<div id="hiddenBlock">
		<p>Рандомное наполнение</p>
	</div>
	<button onclick="showBlock()" id="trigerShowButton">Показать блок</button>
	<button onclick="hideBlock()" id="trigerHideButton">Скрыть блок</button>
	<script type="text/javascript">
		var block = document.getElementById('hiddenBlock');
		function showBlock() {
			document.getElementById('trigerShowButton').disabled = true;
			block.style.display = 'flex';
			setTimeout(opacity, 2);
		}
		function hideBlock() {
			document.getElementById('trigerHideButton').disabled = true;
			block.style.opacity = '0';
			setTimeout(display, 250);
		}
		function display(){
			block.style.display = 'none';
			document.getElementById('trigerHideButton').disabled = false;
		}
		function opacity(){
			block.style.opacity = '1';
			document.getElementById('trigerShowButton').disabled = false;
		}
	</script>
</body>
</html>

Написано более трёх лет назад

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

JavaScript

+1 ещё

Простой
Почему выдает ошибку когда загружаю проект в Vercel?
- 1 подписчик
- 3 часа назад
- 27 просмотров
0

ответов
JavaScript

Простой
Как сгруппировать значения массива?
- 1 подписчик
- 5 часов назад
- 78 просмотров
1

ответ
JavaScript

Простой
Как можно сделать подобный слайдер?
- 1 подписчик
- вчера
- 109 просмотров
0

ответов
JavaScript

+2 ещё

Простой
Ошибка Uncaught ReferenceError: exports is not defined?
- 1 подписчик
- вчера
- 47 просмотров
1

ответ
JavaScript

Простой
Как убрать фоновое изображение через 5 сек?
- 1 подписчик
- вчера
- 77 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Как сделать проверку на константы внутри enum линтом?
- 1 подписчик
- вчера
- 55 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Почему не указывается путь к файлу js?
- 1 подписчик
- вчера
- 79 просмотров
1

ответ
JavaScript

+3 ещё

Простой
MIME тип CSS при попытке добавить stylesheet в head через скрипт. Как решить проблему?
- 1 подписчик
- 13 нояб.
- 93 просмотра
2

ответа
JavaScript

+3 ещё

Простой
Ошибка с Babel при сборке Webpack?
- 1 подписчик
- 13 нояб.
- 59 просмотров
1

ответ
JavaScript

+4 ещё

Простой
Почему слайдер на базе Swiper с видео YouTube в iframe не двигается при свайпе?
- 2 подписчика
- 13 нояб.
- 58 просмотров
0

ответов
Показать ещё Загружается…

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

Fullstack разработчик JavaScript, php

Дорстрой-36 • Воронеж

от 100 000 до 200 000 ₽

JavaScript FullStack developer

Wanted. • Санкт-Петербург

До 220 000 ₽

Ищу специалиста по настройке рекламы

15 нояб. 2024, в 18:08

10000 руб./за проект

Внести изменения/правки в исходный код ardupilot

15 нояб. 2024, в 17:13

100000 руб./за проект

Починить смену почты в обработке входящих аккаунтов - C# .Net

15 нояб. 2024, в 16:51

10000 руб./за проект

А я хочу чтобы люди научились правильно задавать вопрос.
Ярослав Иванов, что конкретно не понятно в вопросе? я даже логику скрипта написал по пунктам

Answer 1 · 2020-05-11 20:20:38

проблема решилась с помощью метода animate (оказалось все гораздо проще) https://developer.mozilla.org/ru/docs/Web/API/Elem...
работает на хроме и FF

Answer 2 · 2020-05-11 16:43:16

В css свойствах описываете
transition: all .5s linear;
Затем ванильными средствами js описываете

document.getElementByTagName('block1').style.display = 'flex';
document.getElementByTagName('block1').style.opacity = '1';

Либо с помощью jquery, причём точку ставите, когда ищите элемент по классу, а #, если по id

$('.block1').css({
    'display': 'flex',
    'opacity': '1'
})

Обратно соответственно заменяете свойства на нужные.

Кнопку соответственно можно отключить так

document.getElementByTagName('button1').disabled = true;

Появление блока через JS?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт