CSS3 transition arbeiten eine Möglichkeit, aber nicht die anderen

Ich habe eine <div> ist conditionaly hat man entweder zwei-Klassen -

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

Die erste Klasse wird immer hidden, und wenn visible ersetzt, die Klasse der width, left und opacity Eigenschaften sind alle animiert mit einer CSS3-transition.

Jedoch, wenn die hidden Klasse replcaes visible die animation wird nicht rückgängig gemacht und nur die neuen Werte für alle drei Eigenschaften werden eingeschaltet sofort.

Habe ich versucht, indem die transition - Eigenschaft, um die Stile, die für beide .visible und .hidden als auch jeder einzeln, aber in allen Fällen nur die visible animation funktioniert.

Was mache ich hier falsch?

Relevanten HTML -

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

CSS für #modal.hidden und #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;
}

Weitere attemtps

Habe ich nun entdeckt, dass eine anfängliche fehlen height war die Frage. Der code unten nur noch in eine Richtung funktioniert.

Was ich brauche -

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

Beim übergang von .hidden zu .visible dem vaule von height sollte sich ändern, sofort. Allerdings gehen den anderen Weg height übergang nach einer Verzögerung von 0.5s, so dass für die anderen Animationen zu beenden. Ich habe mit dem folgenden code, aber es ist immer noch nicht ganz da.

.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;
}
  • Versuchen Sie, den transition Regeln auf .mobile #modal statt .mobile #modal.visible.
  • übergang sollte einmal festgelegt werden auf die Standardeinstellung scheint zu sein, wie #modalen hier :). sonst auf jede Regel, aber redondant
  • Thnks für die Anregungen, aber das funktioniert auch nicht. Ich habe auch versucht haben, entfernen .mobile #modal.hidden ausschliesslich (die Platzierung der Eigenschaften in .mobile #modal), aber das scheitert auch.
  • Ich habe um mit CSS, und habe etwas ähnliches Versucht 2 arbeiten: jsfiddle.net/v2b5e9d3
  • Danke, das hilft. Ich habe heute entdeckt, dass das Problem war, dass ich fehlte height aus .mobile #modal. Aber das wirft ein weiteres Problem; ich muss den Umbau der Höhe für 0 zu 100% sofort, wenn .visible ersetzt .hidden, aber dann übergang nach 0.5s wenn .hidden ersetzt .visible. Ich aktualisiert meine Frage, um dies zu zeigen, wie kann ich das jetzt nicht damit es funktioniert.
  • Ah, endlich habe ich es. Kein Grund zur Sorge über das ändern der Höhe, das übernachten auf 100%. Stattdessen habe ich nur Hinzugefügt z-inded: -1 als ein Anfangswert in .mobile #modal und es funktioniert wie gewünscht. Danke für deine Kommentare 🙂

InformationsquelleAutor David Gard | 2015-08-29
  1. 1

    Angeleitet durch den Kommentar gepostet von @MaximillianLaumeister ich festgestellt, dass das problem war, dass keine anfängliche Höhe Wert definiert wurde.

    Dann habe ich versucht, den übergang, der Wert als gut, aber am Ende war die Lösung zu einfach "ausblenden" #modal durch Einstellung z-index: -1;.

    Als übergang geht form 99 -1 ((0,5 s), .mobile #modal ist im wesentlichen überall sichtbar den übergang, nur verschwinden hinter den anderen content-ca 0,005 s vor dem Ende).

    .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;
}
    InformationsquelleAutor David Gard
Schreibe einen Kommentar