Toggle An Element Between Visibility States – toggleTransition.js

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