display none breaks animation

Question

i want a certain div to be shown in certain circumstances, and i want it to be animated, at the start it should be invisible so...

.fixedNav{
    background-color: rgba(28,20,13, 0.75);
    position:fixed;
    color:white;
    width:60vw;
    margin-top:-50px !important;
    z-index: 1;
    display:none;
    opacity:0;
    transition:opacity .3s ease-in;
}

and then i animate the opacity with css by adding this class, with jquery, to it:

.fixedNavActive{
    display: block;
    opacity:1;
}

and it all works fine if i remove the display: none; from the main class, if i leave it there then the opacity isn't animated, it just appears, why does it break it and how can i make it animate the opacity instead of toggling it to 1?

Answer 1

Basically, you cannot animate display properties, and even though you're only trying to animate the opacity, that transition fails because when the transition begins, the element doesn't exist. It has been removed from the flow due to the display: none property.

You can achieve the effect you're looking for by using visibility: hidden and visibility: visible, which is an animatable property, and if you need to effectively remove the element from the flow when it lacks visibility, then you can apply a max-height of 1px to the element and a margin-top of -1px.