d-none hide show trasition code example

Example 1: how to animate div display

<!-- Here's a way to animate/transition 
the opacity and display of your div! -->
<style>
  /*This is a fade in example.*/
  @keyframes fadeIn {
    0% {display:none; opacity:0;}
    1% {display:block; opacity:0;}
    100% {display:block; opacity:1;}
  }
  /*This is a fade out example. */
  @keyframes fadeOut {
    0% {display:block; opacity:1;}
    1% {display:none; opacity:1;}
    100% {display: none; opacity:0;}
  }
  #animate {
    /*put animation attributes here. Here's a list.
    (https://www.w3schools.com/css/css3_animations.asp)*/
    animation-duration: 2s;
    animation-iteration-count: 1;
    /*put the default display and opacity here, the same as "0%"*/
    display: none;
    opacity: 0;
  }
</style>
<script>
  function appear() {
    document.getElementById('animate').style.animationName = "example";
    /* you can also change the display completely after the animation 
    is done. (setTimeout, same time as animation-duration). For example,
    setTimeout after 2 seconds, and make function .style.display = "block";
    and style.opacity = "1"; to make the change permanent. */
  }
</script>
<!-- You can put anything to activate the function, by the way. -->
<button onclick="appear()"> example </button>
<!-- This div is what's being animated, which explains why the function
appear() has 'animate' in it. -->
<div id="animate"> </div>

Example 2: transition not working display none

/*short answer:
 use 'visibility' instead of 'display' */


/*explanation: */
/* THIS DOES NOT WORK --> */

.navigation__quaternary {
   display: none;
   opacity: 0;
   transform: scale(0.75);
   transition: 
     opacity 350ms cubic-bezier(0.19, 1, 0.22, 1) 0ms, 
     transform 350ms cubic-bezier(0.19, 1, 0.22, 1) 0ms;
}

.navigation__quaternary:hover {
      display: block;
      opacity: 1;
      transform: scale(1);
}

/* THIS WORKS --> */

.navigation__quaternary {
   visibility: hidden;
   opacity: 0;
   transform: scale(0.75);
   transition: 
     opacity 350ms cubic-bezier(0.19, 1, 0.22, 1) 0ms, 
     transform 350ms cubic-bezier(0.19, 1, 0.22, 1) 0ms;
}

.navigation__quaternary:hover {
      visibility: visible;
      opacity: 1;
      transform: scale(1);
}

/* I think is happens because 'display:none' elements are considered 
not in the dom and thus browser cannot process transition */