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