CSS-Übergang - zwei Richtungen?

Hier ist ein grobes Beispiel zu helfen, zu zeigen, was ich möchte: http://jsfiddle.net/GVaNv/

Ich Frage mich, ob es eh das overlay-Bild transition von der linken Seite, aber dann lassen Sie von der rechten Seite.

Also, auf zu schweben, das overlay kommt, wie es im Beispiel, sondern der Rückzug wieder nach Links, um transitions auf der rechten Seite.

Ist das möglich? (nicht unbedingt transition ich bin offen für jeden Weg, es zu tun).

  • Es wäre trivial, wenn Sie ein klein wenig JavaScript eine Klasse Hinzugefügt werden, je nachdem, ob es schweben an oder aus.
InformationsquelleAutor justinw | 2014-04-08
  1. 14

    Hier ist eine einfache Lösung, die nicht erfordert mehr HTML-oder JavaScript:

    HTML-Code:

    <div class="box">
    <div class="overlay">
        Overlay
    </div>
</div>

    CSS-Code:

    .box {
    height: 250px;
    width: 250px;
    background: aqua;
    position: relative;
    overflow: hidden;
}

.overlay {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.5);
    width: 100%;
    color: white;
    padding: 10px;
    left: -270px;
    margin-left: 520px;
    bottom: 0;
    transition: left 300ms linear, margin-left 300ms ease-out;
}

.box:hover .overlay {
    left: 0;
    margin-left: 0;
    transition: left 300ms ease-out;
}

    Dieser nutzt die Marge für die animation. Es funktioniert wie folgt:

    1. Die überlagerung Ruhezustand eingestellt ist, um rechts neben dem element mit einem margin (während der left ist positioniert auf der linken Seite des Elements).
    2. Auf hover, setzen wir die Marge auf 0 ohne eine animation. Dies ermöglicht es der left animation von der linken Seite des Elements.
    3. Beim mouse-out -, die Marge wird animiert zu gehen, zu seiner Ruhe-state auf der rechten Seite des Elements.

    JSFiddle

    • +1 Diese Antwort ist absolut genial.
    • Keine Notwendigkeit zu verwenden 0ms einfach nicht in die übergangs-Liste, sprich: transition: left 300ms ease-out;. Große Lösung.
    • Danke, hab ich aktualisiert den übergang.
    InformationsquelleAutor SombreErmine
  2. 2

    Ich habe versucht, dies zu erreichen, nur mit CSS-einschließlich additiona div markup wie folgt DEMO

    HTML

    <div class="box">
    <div class="overlay">
        Overlay
    </div>
    <div class="overlayFalse">
        Overlay false
    </div>
</div>

    CSS

    .box {
    height: 250px;
    width: 250px;
    background: aqua;
    position: relative;
    overflow: hidden;
}

.overlay, .overlayFalse {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.5);
    width: 96%;
    color: white;
    padding: 2%;
    right:-274px;
    bottom: 0;
    transition: right 300ms ease-out, left 300ms ease-out;

}

.overlayFalse{
    opacity:0;
    right:auto;
    left:-274px;
}

.box:hover .overlay {
    right:0;
    opacity:0;
}

.box:hover .overlayFalse{
    opacity:1;
    left:0;
}
    • Ich denke, es könnte möglich sein, das zu tun, ohne die zusätzlichen doppeltes element (während immer noch nur mit CSS).
    • können Sie ihm einen Versuch geben, Es wäre toll dies zu erreichen, ohne zusätzliches markup mit css nur
    InformationsquelleAutor Pravin Waychal
  3. 1

    Vielleicht können Sie Gebrauch machen von CSS3-Animationen, mit einer für Schiebetüren in und ein weiteres für Schiebetüren aus:

    @keyframes overlay-in {
  from {
    left: -999px;
  }

  to {
    left: 0;
  }
}

@keyframes overlay-out {
  from {
    left: 0;
  }

  to {
    left: 999px;
  }
}

    Nun können Sie die overlay-in animation auf :hover und die andere auf die normale element-definition:

    .box .overlay {
    /* other definitions ... */
    animation-name: overlay-out;
    animation-duration: 1000ms;
    animation-fill-mode: none;
}

.box:hover .overlay {
    animation-name: overlay-in;
    animation-duration: 600ms;
    animation-fill-mode: forwards;
}

    Aber es gibt ein problem mit dieser: Die slide-out-animation wird einmal abgespielt, dann auf die Seite laden. Ich kann nicht herausfinden, ein Weg, um dies zu verhindern, ohne eine kleine JavaScript, das hinzufügen einer Klasse, um die überlagerung auf das erste mouseout Veranstaltung. Ich habe es getan, auf diese Weise in einem JSFiddle.

    Aber natürlich, so bald wie Sie benötigen JavaScript, Sie hätte auch einfach die übergänge. Aber diese Methode funktioniert auch ohne JavaScript, wenn Sie Leben können mit dem Abspielen von Animationen auf der Seite zu laden.

    InformationsquelleAutor Callidior
Schreibe einen Kommentar