Появление блока через 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 подписчик
- вчера
- 69 просмотров
1

ответ
JavaScript

+2 ещё

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

ответов
JavaScript

+1 ещё

Простой
Как написать текст на окружности и посчитать точки?
- 1 подписчик
- вчера
- 90 просмотров
0

ответов
JavaScript

Средний
Как остановить весь скрипт js при выполнении условия tampermonkey?
- 1 подписчик
- вчера
- 81 просмотр
2

ответа
JavaScript

Средний
.stopPropagation() на самом деле не останавливает распространение события?
- 1 подписчик
- 26 дек.
- 115 просмотров
1

ответ
JavaScript

Простой
Нужно ли проверять импорт модуля js на повторную загрузку?
- 1 подписчик
- 26 дек.
- 56 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Почему у меня не может найти URL_TO_BOT?
- 1 подписчик
- 25 дек.
- 57 просмотров
0

ответов
JavaScript

+3 ещё

Простой
Как отключить swiper-bundle.min.css?
- 1 подписчик
- 25 дек.
- 64 просмотра
2

ответа
JavaScript

Простой
Почему не правильно срабатывает условие в цикле?
- 1 подписчик
- 25 дек.
- 104 просмотра
0

ответов
JavaScript

+2 ещё

Средний
Расскажите про паттерны работы с GraphQL?
- 7 подписчиков
- 25 дек.
- 1861 просмотр
1

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

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

Rocket • Смоленск

от 80 000 до 130 000 ₽

Fullstack-разработчик PHP/JavaScript

LegalIndonesia

от 3 000 до 3 000 $

Бэкэнд-разработчик JavaScript

Wanted. • Москва

от 250 000 до 400 000 ₽

Закончить разработку мобильного приложения FLUTTER-Dart

28 дек. 2024, в 11:51

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

Доработать backend для платформы Full-time, Mid+/Senior

28 дек. 2024, в 10:57

1500 руб./в час

Настройка AFFiNE на сервере с помощью удаленной консультации

28 дек. 2024, в 10:52

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

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

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?

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

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

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