Author: | denisaleman |
---|---|
Views Total: | 263 views |
Official Page: | Go to website |
Last Update: | February 3, 2022 |
License: | MIT |
Preview:

Description:
toggleTransition.js is a JavaScript library that makes it easy to toggle a DOM element between visibility states using smooth CSS3 transitions.
This can be useful for hiding content on a page that the user shouldn’t have access to (for example spoiler content), or for making elements (like dropdown menus) appear and disappear dynamically.
How to use it:
1. Install and download.
# Yarn $ yarn add toggle-transition # NPM $ npm i toggle-transition
2. Import the toggleTransition.js library.
<script src="toggleTransition.min.js"></script>
3. Enable a button to toggle a DOM element just like a popover.
<button id="toggleAnimatedElement"> Toggle Element </button>
<div id="animatedElement" class="popover popover_is_hidden"> Content To Show/Hide </div>
/* Example CSS */ .popover { width: 300px; height: auto; background-color: white; padding: 10px 20px; box-shadow: 3px 3px 19px rgba(0, 0, 0, 0.2); position: relative; transition: opacity 0.3s, transform 0.3s; opacity: 0; transform: translateY(10px) scale(0.9); } .popover_is_shown { opacity: 1; transform: translateY(10px) scale(1); } .popover_is_hidden { opacity: 0; transform: translateY(0) scale(0.9); }
const animatedElement = new ToggleTransition(document.getElementById('animatedElement'), { showTransitionClassname: "popover_is_shown", hideTransitionClassname: "popover_is_hidden", manageVisibilityWith: "visibility", onShowTransitionEnd: function (e, x) { console.log("after show transition callback", e, x); }, onHideTransitionEnd: function (e, x) { console.log("after hide transition callback", e, x); }, }); document.querySelector("#toggleAnimatedElement").addEventListener("click", function () { animatedElement.toggle(); });
4. The example shows how to create a dropdown menu that reveals the sub-menu on hover.
<div id="menu" class="menu"> <div class="menu__item"><a class="link" href="./menu.html">Home</a></div> <div class="menu__item menu__item_has_sub-menu"> <a class="link" href="./menu.html">Services</a> <div class="menu__sub-menu menu__sub-menu_is_hidden"> <div class="menu__item"> <a class="link" href="./menu.html">Training</a> </div> <div class="menu__item"> <a class="link" href="./menu.html">Washing</a> </div> <div class="menu__item"> <a class="link" href="./menu.html">Grooming</a> </div> </div> </div> <div class="menu__item"><a class="link" href="./menu.html">About</a></div> </div>
/* Example CSS */ .menu { max-width: 100%; display: flex; flex-direction: row; align-items: flex-start; } .menu__item { display: flex; flex-direction: column; position: relative; } .menu__sub-menu { display: flex; flex-direction: column; position: absolute; top: 100%; opacity: 0; transform: translateY(10px) scale(1.0); transition: opacity 0.3s, transform 0.3s; } .menu__sub-menu_is_hidden { opacity: 0; transform: translateY(10px) scale(0.90); } .menu__sub-menu_is_shown { opacity: 1; transform: translateY(0px) scale(1.0); } .link { font-family: sans-serif; } .menu__item .link { padding: 10px 20px; display: flex; }
var submenus = document.querySelectorAll('.menu__sub-menu'); var toggleTransitionInstances = Array(); var options = { showTransitionClassname: "menu__sub-menu_is_shown", hideTransitionClassname: "menu__sub-menu_is_hidden", manageVisibilityWith: "visibility", }; submenus.forEach(function(submenu) { var instance = new ToggleTransition(submenu, options); instance .on('mouseover', function(el) { return el.parentElement; }, 'show') .on('mouseout', function(el) { return el.parentElement; }, 'hide'); });
5. All possible options.
- selector: Selector of the DOM element.
- manageVisibilityWith: CSS property that determines element’s visibility. (visibility|display)
- showTransitionClassname: CSS class defines properties to transition when show.
- hideTransitionClassname: CSS class defines properties to transition when hide.
- onShowTransitionEnd: Callback function triggers when show animation ends.
- onHideTransitionEnd: Callback function triggers when hide animation ends.
new ToggleTransition(document.getElementById('animatedElement'), { selector: "" manageVisibilityWith: "visibility", showTransitionClassname: "", hideTransitionClassname: "", onShowTransitionEnd: Callback, onHideTransitionEnd: Callback, });
Changelog:
v2.0.0 (02/03/2022)
- drop ie6-9 support