Появление блока через 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?

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

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 ещё

Средний
Как сделать программную навигацию без изменения url в vue-router + vue3?
- 1 подписчик
- 17 минут назад
- 5 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Three.js объект сзади не виден при повороте к нему лицом?
- 2 подписчика
- 4 часа назад
- 42 просмотра
1

ответ
JavaScript

+2 ещё

Простой
Как скачать pdf из встроенного просмотрщика на сайте?
- 1 подписчик
- 6 часов назад
- 102 просмотра
1

ответ
JavaScript

+1 ещё

Простой
Как построение маршрута на 2GIS API v2.0?
- 1 подписчик
- 8 часов назад
- 42 просмотра
0

ответов
JavaScript

Средний
Эффект наложения блоков?
- 1 подписчик
- 22 часа назад
- 107 просмотров
2

ответа
JavaScript

+2 ещё

Средний
Как изменить содержание блока програмно со свойством contentEditable?
- 1 подписчик
- 22 часа назад
- 78 просмотров
0

ответов
JavaScript

+4 ещё

Средний
Как сделать правильное динамическое масштабирование ion-range в зависимости от ширины колонок линии со значениями?
- 1 подписчик
- 22 часа назад
- 43 просмотра
0

ответов
JavaScript

Простой
Как после сабмита очистить поле type="tel" и показать очищенную маску?
- 2 подписчика
- вчера
- 69 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Почему при добавление переменно в style, она перестаёт обновляться?
- 1 подписчик
- 22 апр.
- 69 просмотров
1

ответ
JavaScript

Простой
Как получить результат отправки на сервер, если fetch-запрос был в одной функции, а результат нужен в другой?
- 1 подписчик
- 22 апр.
- 80 просмотров
1

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

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

SummerWeb • Ярославль

от 100 000 до 140 000 ₽

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

вАйТи

от 5 000 до 25 000 ₽

JavaScript Fullstack

OnClass

от 200 000 до 600 000 ₽

Верстка сайт - визитка

24 апр. 2024, в 20:57

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

Разработка стратегий продвижения в соц сетях FB

24 апр. 2024, в 20:50

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

Правка в веб приложение

24 апр. 2024, в 20:35

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

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

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?

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

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

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