Wie kann ich mithilfe von CSS-transitions animieren, ein responsive layout die vertikale Ausrichtung?

Ich versuche herauszufinden, ein Weg, um reibungslos zu animieren reaktionsschnell Weg ändern, auf einige Elemente' display - Eigenschaft, wenn der browser die Größe und ab einem bestimmten Haltepunkt. Ich möchte mit CSS-übergängen, aber Sie gelten nicht für die display Eigenschaft, so kann ich Sie haben, um herauszufinden, einen workaround. Klar, ich bin nur Probleme beim animieren von änderungen, um die vertikale Ausrichtung von Elementen, die waren vorher horizontal angeordnet. Andere, einfache, ansprechende Animationen wurden eingestellt, ohne Frage.

Hier ist ein einfaches Beispiel

In diesem Beispiel habe ich eine wirksame übergänge für das div-Dimensionen, aktivieren Sie an bestimmten Haltepunkten. Die Letzte (kleinste Fenster) übergang bewirkt, dass die divs vertikal. Auf den ersten, dies wurde erreicht, indem einfach die divs aus display:inline-block; zu display:block;. Dies war jedoch nicht animiert werden, mithilfe von CSS-transitions, also habe ich versucht, eine alternative Methode. Die alternative, die beteiligten ändern des divs aus position:relative; zu position:absolute; und Anpassung Ihrer top Eigenschaften. Ich dachte, CSS-übergänge in der Lage sein würde, um effektiv zu animieren, die änderung in top aber das scheint nicht zu passieren.

Hat jemand irgendwelche Vorschläge?

  • Was wollen Sie wissen ?Bitte beschreiben Sie einfach Weg.Hoffnung für die Antwort.Sagen Sie mir, was zu tun ist.
InformationsquelleAutor Brian S | 2013-12-26
  1. 1

    Dein problem ist, dass der Wechsel von relativen zu absoluten. Das kann nicht umgestellt werden, in keiner Weise.

    Nur versuchen, Ihre Stile und ändern nur numerische Eigenschaften.

    Beispielsweise, Sie halten können mit der relativen position, und stellen Sie den linken und oberen Werte entsprechend:

    @media (max-width: 680px) {
    .box {
        width:150px;
        height:150px;
    }
    #box1 {
        left: 165px;
        top:10px;
    }
    #box2 {
        left: 0px;
        top:170px;
    }
    #box3 {
        left: -165px;
        top:330px;
    }
}

    demo

    Ändern ein wenig den Stil zu vermeiden, die sich hässlich Verhalten in kleineren Bildschirme

    @media (max-width: 680px) {
    .box {
        width:150px;
        height:150px;
        margin-left: -77px;
        margin-right: -77px;
        left: 0px;
    }
    #box1 {
        top:10px;
    }
    #box2 {
        top:170px;
    }
    #box3 {
        top:330px;
    }
}

    neue demo

    Das problem kam, als die Breite des Containers konnte nicht mehr die 3 divs, und Sie beginnen zu fließen, zu einer anderen Zeile.

    • Ja! Das ist der Effekt, den ich Suche. Ich bin mir bewusst, dass änderungen an der position-Eigenschaft sind nicht anwendbar css-übergänge oder Transformationen. Ursprünglich hatte ich erreicht, die Orientierung zu ändern durch eine änderung der display:inline-block zu display:block am kleinsten Haltepunkt. Dieser erstellt eine korrekte Ausrichtung war aber auch nicht in der Lage die Animation nur css. Deine Lösung ist elegant einfach, aber - lassen Sie position allein und passen Sie die Eigenschaften top und left! Danke.
    • Ich möchte jedoch hinzufügen, dass es eine unbeabsichtigte problem ist, dass sich als Folge dieses Updates. Wenn das Fenster Größe reduziert über die letzten Haltepunkt, der divs beginnen, richten Sie in verrückte Wege. Ich werde sehen, was ich tun kann, da dieser fix scheint wie eine große Lösung, abgesehen von diesem Fehler.
    • Ich kann nicht scheinen, um zu identifizieren, was das problem ist, was diese divs Rendern alle über den Ort, an einem bestimmten Punkt. Wenn das browser-Fenster wird auf etwa 500 Pixel breit oder weniger, und Sie können sehen, die unerwünschte Auswirkungen. Keine Ahnung, was Los ist???
    • Aktualisiert meine Antwort, jetzt funktioniert es ok
    InformationsquelleAutor vals
  2. 0

    statt über Positionen oder display verwenden Sie float-element und geben Sie eine weitere Pause, so dass Sie können anzeigen, wie sich der übergang Los ist..

    hier ist fiddle http://jsfiddle.net/822bX/

    .box {
    float:left;
    width:300px;
    height:300px;
    margin:0 5px;

}
@media (max-width: 680px) {
.box {
        width:150px;
        height:150px;
    -moz-transition:width 2s, height 2s, background-color 2s, -moz-transform 2s;
    -webkit-transition:width 2s, height 2s, background-color 2s, -webkit-transform 2s;
    -o-transition:width 2s, height 2s, background-color 2s, -o-transform 2s;
    transition:width 2s, height 2s, background-color 2s, transform 2s;

       clear:both;

    }
}
    @media (max-width: 380px) {
         .box {
        width:80px;height:80px;
        }}
    • Ich bin mir nicht sicher, was dies ist beabsichtigt, um zu demonstrieren. Die Frage auf der hand beinhaltet die Animation den übergang zu den senkrechten Zustand. Dies scheint fast der gleiche wie mein vorheriger code, aber auf der linken Seite anstatt in der Mitte. Ich bin nicht zu sehen, das Letzte Haltepunkt durchführen jegliche Animationen.
    • "im großen Display haben Sie alle drei div nebeneinander, aber wenn man es auf tablet oder Telefon, es sollte ausgerichtet in der vertikalen, um mit einem übergang" ist das, was Sie wollen??
    • Ja, beim betrachten der kleinste Haltepunkt der divs ändern sollten aus horizontal ausgerichtet vertikal ausgerichtet. Alleine das ist eindeutig machbar eine Anzahl von Möglichkeiten. Die Schwierigkeit scheint zu sein, animieren Sie die Ausrichtung ändern ohne sich mit javascript/jquery.
    InformationsquelleAutor 3bu1
Schreibe einen Kommentar