js smooth display none code example

Example: 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 */