css display none transition
div {
border: 1px solid #eee;
}
div > ul {
visibility: hidden;
opacity: 0;
transition: visibility 0s, opacity 0.5s linear;
}
div:hover > ul {
visibility: visible;
opacity: 1;
}
css display none transition
div {
border: 1px solid #eee;
}
div > ul {
visibility: hidden;
opacity: 0;
transition: visibility 0s, opacity 0.5s linear;
}
div:hover > ul {
visibility: visible;
opacity: 1;
}
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 */
Copyright © 2021 Codeinu
Forgot your account's password or having trouble logging into your Account? Don't worry, we'll help you to get back your account. Enter your email address and we'll send you a recovery link to reset your password. If you are experiencing problems resetting your password contact us