Geek Answers Handbook

CSS3 transition works in one direction but not in another

I have <div>, which is conditional, has one of two classes -

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

The initial class will always be hidden, and when visiblereplacing this class, properties width, leftand opacityeverything is animated using the CSS3 transition.

However, when the class hiddenreplicates visible, the animation does not reverse and sets new values ​​for all three properties, they instantly switch.

I tried to add the property transitionto the styles for both .visible, and for .hidden, as well as for each separately, but in all cases only animation works visible.

What am I doing wrong here?

Matching HTML

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

CSS for #modal.hiddenand#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;
}

, height. - .

-

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

.hidden .visible height . height 0.5s, . , .

.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;
}
+4
1

, @MaximillianLaumeister, , , .

, "" #modal, z-index: -1;.

, 99 -1 ( 0,5 ), .mobile #modal , 0,005 ).

.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;
}
+1

More articles:


All Articles