Как сделать плавное появление блока на нативном JavaScript-е?

Question

[Влад]

Как сделать плавное появление блока на нативном JavaScript-е? Чтобы было как в jQuery типа element.show(300).
Набросал лайт-код, но плавного появления мне добиться не удалось.

https://codepen.io/vlad-tarasoffka/pen/VwKweGb

<div class="container">
	<a id="modal" href="#">Open modal</a>
	<div class="overlay">
		<div class="wrapper">
			<div class="close">X</div>
			<div class="text">
				<h1>Uis facilis doloribus</h1>
				<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis facilis doloribus esse dicta voluptate. Temporibus similique at ducimus ipsam magni. Quo, quasi explicabo? Impedit aliquam aperiam laudantium perferendis voluptas repudiandae!</p>
				<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem odit, perspiciatis ratione rem quasi sint non harum similique delectus quaerat.</p>
				<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi reiciendis non ipsum, quis quasi minus?</p>
			</div>
			<div class="modal-bottom"></div>
		</div>
	</div>
</div>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Verdana;
}
.container {
  width: 100%;
  height: 100%;
  padding: 25px;
  background: #fff;
}
.overlay {
			position: fixed;
			display: none;
      opacity: 0;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0,0,0,0.8);
}
.show {
			display: flex;
      opacity: 1;
      transition: opacity 1s linear;
}
.wrapper {
			position: relative;
			display: flex;
			flex-direction: column;
			width: 60%;
			height: 60%;
			background: #fff;
			border: 0;
			box-shadow: 0 0 14px rgba(0,0,0,0.6);
}
.text {
			height: 100%;
			background: #fff;
			border: none;
      margin-top: 45px;
			padding: 0 40px 30px 60px;
			overflow-y: auto;
}
.close{
  position: absolute;
  width: 45px;
  height: 45px;
  top: 0;
  right: 0;
  background: #f00;
  color: #fff;
  font-weight: bold;
  display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
  cursor: pointer;
}
.modal-bottom {
  position: absolute;
  width: calc(100% - 17px);
  bottom: 0;
  height: 50px;
  background: linear-gradient(to top, #fff 35%, transparent);
}
h1 {
  margin-bottom: 20px;
}
p {
  line-height: 1.5;
  margin-bottom: 10px;
}

const modalLink = document.querySelector('#modal');
const overlay = document.querySelector('.overlay');
const closeBtn = document.querySelector('.close');

modalLink.addEventListener('click', e => {
  // overlay.style.display = 'flex';
  overlay.classList.add('show');
});

closeBtn.addEventListener('click', e => {
  // overlay.style.display = 'none';
  overlay.classList.remove('show');
});

Comments

[Vitaliy]

если это с целью обучения, то определяйте

.visible {
    display: flex; 
}
.show {
      opacity: 1
}

и

overlay.classList.add('visible');
  requestAnimationFrame(() => {
    overlay.classList.add('show');
  })

так как display none не дает отработать tranition'у.

Если нужно реально сделать, то просто используйте готовые решения

[Антон Литвиненко]

джейкверивские show, hide, slideToggle итд вообще-то не юзают файл стилей и работают без классов

[Влад]

Виталий Столяров, нужно в реальный проект впихнуть на ванильном JS. Какие готовые решения порекомендуете и чем они отличаются от предложенного вами варианта (для учёбы)?

[Vitaliy]

Vextor-ltd, погуглите, вполне возможно что уже есть готовые библиотеки. Скорее всего, подойдет какая-то библиотека для анимаций. Их преимущество в том, чтобы не писать велосипеды

[Влад]

Виталий Столяров, да можно внедрить тот же animate.cs , но хотелось бы знать как это делается на чистом JS, так сказать залезть под капот ))

@Антон Литвиненко Я имел ввиду визуальное подобие, а с использованием css или без мне по барабану.

[Vitaliy]

Vextor-ltd, тогда мой ответ выше

Answer 1

[YavaDev]

Все очень просто

.overlay {
  display: flex;
  visibility: hidden;
  opacity: 0;
  transition: opacity 1s linear, visibility 1s linear;
  .......
}
.overlay.show {
  opacity: 1;
  visibility: visible;
}

Свойство display не анимируется, но зато очень хорошо анимируется opacity и visibility.

Comments

[Ankhena]

но зато очень хорошо анимируется opacity и visibility

И какие средние состояния visibility между hidden и visible?

[YavaDev]

Ankhena, а зачем вам средние состояния visibility между hidden и visible?

[Ankhena]

YavaDev, мне-то ни за чем.
Это вы пишете, что visibility прекрасно анимируется, чем вводите людей в заблуждение.
А я так, чисто узнать, за счет чего оно там собралось анимироваться.

[YavaDev]

Ankhena,

что visibility прекрасно анимируется

Такого я не писал.
Я написал следующее:

хорошо анимируется opacity и visibility

Это значит, если вместо display использовать visibility, тогда будет плавная анимация появления блока, чего и хотел автор вопроса.
Ну и как бонус, будет еще и плавно исчезать.

[Ankhena]

YavaDev, а этой строчкой

transition: opacity 1s linear, visibility 1s linear;

вы тогда что творите?
Тут четкая просьба браузеру плавно изменять visibility целую секунду.

[YavaDev]

Ankhena, а вы зайдите в песочницу и попробуйте удалить эту строчку - "visibility 1s linear". Без неё блок будет плавно появлятся, а исчезать будет уже не плавно.

[Ankhena]

YavaDev, https://jsfiddle.net/4b6Lrnow/

[YavaDev]

Ankhena, отлично, при ховере появился блок. Только вот когда его как бы нет, я могу с ним взаимодействовать и в вашей песочнице з-индекс вам не помог убрать под боди (думаю в этом была задумка).
Вот скрин, курсор увел куда-то вниз, далее убрал в девтулз прозрачность, а выделить текст я все равно могу.

[Ankhena]

YavaDev, успеть повзаимодействовать вы можете только в когда блок видим или в момент анимации. Когда скрыт - нет. Z-index в данном случае не прячет элемент под боди, а убирает смену курсора при его попадании в зону скрытого блока.

Но вы правы в том, что relative недостаточно, скрытый блок нужно убирать из потока и прятать подальше. Потому как, кому он нужен, скрытый, но занимающий место.

Собственно и вопрос автора про имитацию hide и show, а не просто fadein/fadeout.

[YavaDev]

Ankhena,

успеть повзаимодействовать вы можете только в когда блок видим или в момент анимации

Нет, даже когда прозрачность 0 я могу выделить текст, нажать например ctrl+c и вставить скопированный текст в другом месте.
А вот свойство visibility как раз и исключает такую возможность.

Собственно и вопрос автора про имитацию hide и show, а не просто fadein/fadeout.

А когда блок имеет position: fixed;, как в данном случае с модальным окном, или position: absolute;, тогда мой способ на все 100% как раз и имитирует hide и show, а не просто fadein/fadeout

[YavaDev]

Ankhena, а вот код автора с моими правками (добавил комментарии в css) https://codepen.io/YavaDev/pen/mdrPbGO
И все прекрасно работает, модальное окно плавно открывается и закрывается.
А также когда модальное окно скрыто, я никак не могу с ним взаимодействовать, даже когда у него z-index 10000 и более.
И в моем коде нет лишних строк.

А еще я тут подумал, а если бы я написал transition: all 1s linear;, то все работало точно так же, но зато скорее всего не было бы всей этой переписки.

Answer 2

[andrei1m]

у меня с таймаутом только заработало ->

modalLink.addEventListener('click', e => {
overlay.classList.add('show');
setTimeout(() => {overlay.style.opacity = 1;}, 1);
});
closeBtn.addEventListener('click', e => {
overlay.style.opacity = 0;
setTimeout(() => {overlay.classList.remove('show')}, 200);
});