Форум

12345678 · #1 (**permalink**) 06.02.2022, 10:57

Доброго времени суток.

В jQuery есть возможность плавного скрытия и отображения элемента - .hide(300) и .show(300) .

А как добиться этого же в нативном JS?

рони · #2 (**permalink**) 06.02.2022, 11:22

12345678,
https://learn.javascript.ru/js-animation

рони · #3 (**permalink**) 06.02.2022, 11:24

12345678,
проще присвоить class https://youmightnotneedjquery.com/#fade_in

voraa · #4 (**permalink**) 06.02.2022, 12:02

<style>
div {
	position:relative;
	width:200px;
	height:150px;
	background-color:red;
	transition-property: opacity;
	opacity:1;
}
.hidden {
	opacity:0;
}

</style>
<body>
<button id=show>Show</button>
<button id=hide>Hide</button>
<br>
<br>
<div id=div></div>

<script>

function show (elem, tm) {
	if (elem.classList.contains('hidden')) {
		elem.hidden = false;
		elem.style.transitionDuration = tm + 'ms'
		setTimeout(() => elem.classList.remove('hidden'), 0)
	}
}

function hide (elem, tm) {
	if (!elem.classList.contains('hidden')) {
		elem.addEventListener('transitionend', () => elem.hidden = true, {once:true})
		elem.style.transitionDuration = tm + 'ms'
		elem.classList.add('hidden')
	}
}

const div = document.getElementById('div')

document.getElementById('show')
.addEventListener('click', () => show(div, 1000));

document.getElementById('hide')
.addEventListener('click', () => hide(div, 1000))

</script>
</body>

12345678 · #5 (**permalink**) 07.02.2022, 00:12

рони
voraa

Спасибо за ответы. Но это вроде как всё не аналогичная замена. При скрытии, как я понял (при просмотре html в инструменте разработчика пробегают цифры), меняется высота блоков, от изначального до нулевого, оттого визуально и складывается впечатление плавного скрытия\раскрытия.
Причём размеры скрываемых и отображаемых блоков могут быть не указаны вовсе.

voraa · #6 (**permalink**) 07.02.2022, 07:06

Сообщение от 12345678

меняется высота блоков, от изначального до нулевого, оттого визуально и складывается впечатление плавного скрытия\раскрытия.

У кого меняется высота блока? У jquery?
У меня меняется только прозрачность, а потом блок просто исчезает.
Можно сделать как угодно - можно менять высоту, можно менять ширину, можно сделать выезжающий блок...
Если размеры не указаны, их можно посчитать...

Форум

Справочник

Discord чат

Курсы javascript