Различные анимации на странице — это всегда привлекательно и функционально. Одна из таких — эффект исчезновения и появления блока (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.
Читайте больше по теме: