Различные анимации на странице — это всегда привлекательно и функционально. Одна из таких — эффект исчезновения и появления блока (fade, toggle, hide) при нажатии на кнопку или при других каких-либо событиях.
Не путайте фреймворк VanillaJS с «vanilla js» как определением способа использования чистого javascript, без каких-либо библиотек (по-простому — «ванильный javascript»).
В библиотеке jQuery есть несколько быстрых вариантов реализации этой анимации:
-
- hide/show — показать/скрывать элементы за счет изменения размера и прозрачности.
- toggle — показывает или скрывает элементы в наборе объекта jQuery.
- slideToggle (slideDown, slideUp) — отобразить или скрыть элементы скользящим движением;
- fadeToggle (fadein/fadeout) — плавное изменение прозрачности;
Для использования этих методов достаточно идентифицировать элемент по классу/id. Можно использовать эти функции как есть, но имеется возможность передавать дополнительные параметры (относящиеся к длительности анимации, типа «slow», или числовые значения).
К более продвинутым методам относится совместное использование css анимации и js/jQuery. Нас интересует вариант сравнения «чистого» использования jQuery и анимация при помощи чистого js и css.
Вот пример реализации метода toggle на jQuery и такой же (внешне) на js и css:
В варианте c jQuery используется .toggle(900) с дополнительным параметром длительности анимации 900 мс.
JS и СSS оказался более простым и более гибким, поскольку при использовании jQuery есть очевидные минусы.
Во-первых при старте вызывается функция, которая представляет собой промис, и ставит ее в очередь на выполнение. Что это означает: на практике вы можете 10 раз подряд кликнуть по кнопке, и все эти события будут запомнены и поставлены в очередь на выполнение, и они обязательно выполнятся все 10 раз. Анимация не будет прерываться! При этом отклоняется вмешательство другого кода в ход выполнения или состояние его внутреннего запроса. Поэтому для корректной работы .toggle() с кнопкой в нашем случае нужно избежать возможности накопление такой очереди. Это делается двумя способами: либо используется метод .stop(), либо деактивировать кнопку после клика. Метод stop() — хороший способ прерывания выполнения анимации и запуска новой.
Во- вторых, простых инструментов (таких, чтобы сходу) изменения хода анимации в jQuery не так много. Тут остается использовать ту же связку с CSS путем непосредственного изменения стилей при помощи $(‘#id’).css(‘attr’,’value’) либо изменением класса CSS элемента. А это уже ближе к обычной анимации на JS — CSS.
Вот как мы реализовали эту анимацию:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script
src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"></script>
<style>
#flex {
display:flex;
flex-direction:row;
justify-content: space-around;
}
#block, #block2, #block3, #block4 {
width:200px;
height:200px;
}
#block {
/*margin-left:auto;margin-right:auto;*/
margin: 0px;
background:blue;
opacity:1;
transition: 2.5s opacity, height 0.9s ease-in, width 0.9s ease-in;
}
#block.fade {
overflow:hidden;
opacity: 0;
height:0px;
width:0px;
transition:0.9s opacity, height 0.9s ease-out, width 0.9s ease-out;
}
#block2, #block4 {
background:red;
}
#block3 {
background:blue;
}
#toggle,#toggle2 {
display: block;width:100px;background:#0b3f93;border:1px solid #0b3f93;border-radius:3px;box-shadow:0 0 5px rgba(0,0,0,0.4);padding:5px;text-align:center;color:white;margin-top:8px;margin-left:auto;margin-right:auto;
}
@media screen and (max-width: 450px){
#flex {
flex-direction:column;
align-items:center;
}
}
</style>
</head>
<body>
<div id="flex">
<div id="blok1">Vanilla JS
<button id="toggle" type="button">HIDE</button>
<div id="block"></div>
<div id="block2"></div>
</div>
<div id="blok2">jQuery
<button id="toggle2" type="button">HIDE</button>
<div id="block3"></div>
<div id="block4"></div>
</div>
</div>
<script>
document.getElementById('toggle').addEventListener('click', function() {
const el = document.getElementById('block');
const el_bott = document.getElementById('toggle');
el.classList.toggle('fade');
el_bott.innerHTML == 'HIDE' ? el_bott.innerHTML='SHOW' : el_bott.innerHTML='HIDE';
});
$('#toggle2').on('click',function(){
$('#block3').toggle(900);
$('#toggle2').text($(this).text() == 'HIDE' ? 'SHOW' : 'HIDE');
},function(){
$("#block3").stop(true, false).toggle(900);
$('#toggle2').text($(this).text() == 'HIDE' ? 'SHOW' : 'HIDE');
})
</script>
</body>
</html>
Как видите, в css в строке 22-23 мы использовали margin:0px, чтобы добиться полного внешнего соответствия анимации на JS поведению метода toggle jQuery (а именно уплывания блока влево). Стоит убрать 23. margin:0px, оставить ширину и прозрачность без изменений (убрать стр. 32. width:0px; и стр 30. opacity: 0;), сделать активным
22. margin-left:auto;margin-right:auto;
и убрать анимацию по ширине и по прозрачности (просто удалить width 0.9s ease-in и 2.5s opacity, из transition ст.26 и 33), как анимация на JS будет себя вести уже как slideToggle jQuery (будет уплывать вверх):
Как видите, реализовать эффект slideToggle на java script оказалась ещё проще: по сути, используется только анимация по высоте.
Конечно, библиотеки и фреймворки незаменимы при разработке больших приложений, добавляя в код абстракцию и упрощая/ускоряя процесс работы со сложным кодом. Но для отдельных случаев, таких, как в этом примере (или, например, бегущая строка без использования устаревшего <marquee>) , нагружать страницу тяжелыми библиотеками для нескольких локальных задач не стоит. Всегда старайтесь, если есть возможность, использовать ванильный javascript.
Читайте больше по теме:
