Аналог нативного JS .hide(300) и .show(300)?
Доброго времени суток.
В jQuery есть возможность плавного скрытия и отображения элемента - .hide(300) и .show(300) . А как добиться этого же в нативном JS? |
12345678,
https://learn.javascript.ru/js-animation |
12345678,
проще присвоить class https://youmightnotneedjquery.com/#fade_in |
<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>
|
рони
voraa Спасибо за ответы. Но это вроде как всё не аналогичная замена. При скрытии, как я понял (при просмотре html в инструменте разработчика пробегают цифры), меняется высота блоков, от изначального до нулевого, оттого визуально и складывается впечатление плавного скрытия\раскрытия. Причём размеры скрываемых и отображаемых блоков могут быть не указаны вовсе. |
Цитата:
У меня меняется только прозрачность, а потом блок просто исчезает. Можно сделать как угодно - можно менять высоту, можно менять ширину, можно сделать выезжающий блок... Если размеры не указаны, их можно посчитать... |
| Часовой пояс GMT +3, время: 14:22. |