CSS3 transition working one way but not the other

Question

I have a <div> that is conditionaly has one of either two classes -

ng-class="{'visible': sidebarShown, 'hidden': !sidebarShown}"

The initial class will always be hidden, and when visible replaces that class the width, left and opacity properties are all animated using a CSS3 transition.

However, when the hidden class replcaes visible the animation is not reversed, and instaed the new values for all three properties are switched to instantly.

I've tried adding the transition property to the styles for both .visible and .hidden, as well as to each individually, but in all cases only the visible animation works.

What am I doing wrong here?

---

Relevant HTML

<div id="modal" data-ng-if="isMobile"
                data-ng-class="{'visible': sidebarShown, 'hidden': !sidebarShown}">
</div>

---

CSS for #modal.hidden and #madal.visible

.mobile #modal{
    position:   absolute;
}
.mobile #modal.hidden{
    left:       0;
    opacity:    0;
    width:      100%;
}
.mobile #modal.visible{
    background-color:   #000000;
    height:             100%;
    left:               271px;
    opacity:            0.8;
    right:              0;
    width:              calc(100% - 271px);
    z-index:            99;
    -webkit-transition: all 0.5s ease-in-out;
    transition:         all 0.5s ease-in-out;
}

---

Further attemtps

I've now discovered that an initial missing height was the issue. The code below still only works one way.

What I need -

.mobile #modal.hidden  { height: 0; }
.mobile #modal.visible { height: 100%; }

When transitioning from .hidden to .visible the vaule of height should change instantly. However, going the other way height should transition after a delay of 0.5s, allowing for the other animations to finish. I've come up with the below code, but it's still not quite there.

.mobile #modal{
    left:               0;
    opacity:            0;
    position:           absolute;
    width:              100%;
    -webkit-transition: left 0.5s ease-in-out,
                        opacity 0.5s ease-in-out,
                        width 0.5s ease-in-out;
    transition:         left 0.5s ease-in-out,
                        opacity 0.5s ease-in-out,
                        width 0.5s ease-in-out;
}
.mobile #modal.hidden{
    height:             0;
    -webkit-transition: height 0 ease-in-out 0.5s;
    transition:         height 0 ease-in-out 0.5s;
}
.mobile #modal.visible{
    background-color:   #000000;
    height:             100%;
    left:               271px;
    opacity:            0.8;
    right:              0;
    width:              calc(100% - 271px);
    z-index:            99;
}

Answer 1

Guided by the comment posted by @MaximillianLaumeister I established that the problem was that no initial height value was defined.

I then tried to transition that value as well, but in the end the solution was to simply "hide" #modal by setting z-index: -1;.

As the transition goes form 99 to -1 (in 0.5s), .mobile #modal is essentially visible throughout the transition, only disappearing behind the other content approx 0.005s before the end).

.mobile #modal{
    height:             100%;
    left:               0;
    opacity:            0;
    position:           absolute;
    width:              100%;
    -webkit-transition: all 0.5s ease-in-out;
    transition:         all 0.5s ease-in-out;
    z-index:            -1;
}
.mobile #modal.visible{
    background-color:   #000000;
    height:             100%;
    left:               271px;
    opacity:            0.8;
    right:              0;
    width:              calc(100% - 271px);
    z-index:            99;
}