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>
@keyframes fadeIn {
0% {display:none; opacity:0;}
1% {display:block; opacity:0;}
100% {display:block; opacity:1;}
}
@keyframes fadeOut {
0% {display:block; opacity:1;}
1% {display:none; opacity:1;}
100% {display: none; opacity:0;}
}
#animate {
animation-duration: 2s;
animation-iteration-count: 1;
display: none;
opacity: 0;
}
</style>
<script>
function appear() {
document.getElementById('animate').style.animationName = "example";
}
</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
.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);
}
.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);
}