Codrspace - Wie Flashcards mit CSS3 Transitions von kara Flip

Ich implementierte vor kurzem Flashcard-Flip-Animation für ein Client-Projekt, und es dauerte einige Zeit, um die richtige CSS, um herauszufinden. Es stellt sich heraus, dass Webkit ziemlich erstaunliche Eigenschaften für diese hat.

Hinweis: Dies funktioniert nur in Chrome und Safari-Browser. Auf Mozilla wird die Flip ohne die Animation auftreten.

Sehen Sie hier Animation.

Auf der HTML-Seite, müssen Sie vier divs:

1. Eine "Bühne" div (ein Wrapper für ganzes Set-up)
2. A „flashcard“ div (ein Wrapper für die zwei Seiten einer Flashkarte)
3. A "vorne" div
4. A "zurück" div

Ihr DOM sollte wie folgt aussehen:

Also, warum die beiden äußeren divs für eine einfache Animation?

Die „Bühne“ div ist notwendig, damit wir schließlich die richtige Perspektive (das heißt Abstand) zum Betrachten der Animation festlegen. Wir müssen sicherstellen, dass das Publikum nicht so in die „Bühne“ close up, dass sie nicht das große Bild (zum Beispiel die erste Zeile in einem Kino) sehen oder so weit entfernt, dass alles zu klein ist (zB die Nasenbluten Abschnitt). Mehr dazu später.

Die Flashcard div ist, was wir eigentlich sein Spiegeln (zusammen mit seinen Kindern - die „vorne“ und „hinten“ divs). Es ist wichtig, das äußere Element zu drehen, so dass die Rotation der Animation sichtbar und konsistent sein. Wenn Sie nur die „vorne“ und „hinten“ Flip und nicht die äußere div, sieht die Animation seltsam, weil man die erste Hälfte der Abgangsseite Animation und die letzte Hälfte der Eintrittsseite der Animation zu sehen.

Okay, nächstes wollen wir einen Text zu den Seiten unserer Flashcard hinzufügen, so dass wir, welche Seite wir sind auf bestimmen kann.

Das erste, was müssen wir durch das Hinzufügen einer Höhe und Breite unserer Flashcard div eine gewisse Struktur in unseren Flashkarte hinzuzufügen. Mit kaum dem Inhalt, ist der Standard ziemlich klein. Wir wollen auch Grenze und box-shadow sofort hinzuzufügen, so dass wir die Grenzen des Lernkarte zu sehen. Technisch gesehen ist der box-shadow optional, aber die Schattierung hilft die Animation besser sichtbar zu machen.

Nächstes Problem. Wir eindeutig nicht wollen, dass beide Seiten der Flashkarte zeigt zugleich. Wir wollen eine oder andere Seite zeigen. Um die Rückseite zu verstecken, lassen Sie sich drehen Sie die „zu“ div aus dem Weg mit der ‚Transformation‘ Eigenschaft. Geben Sie einfach die Anzahl der Grade, die Sie leben würden den Text über die x-Achse zu transformieren.

Der Text der „Rückseite“ div hat jetzt den Kopf gedreht worden ist.

Nächstes Problem. Wir wollen nicht die Upside-Down-Versionen des Textes auf der Rückseite des Lernkarte zu zeigen. Wir wollen nur die Vorderseite - mit dem rechten Seite nach oben Text - zeigt werden. Glücklicherweise gibt es eine webkit Eigenschaft -webkit-Backface-Sichtbarkeit genannt, die die Rückseite gedreht Elemente zu verbergen entworfen wurde. Wir müssen einfach diese Eigenschaft auf „versteckt“ auf den beiden „vorne“ und „hinten“ divs und Text verschwindet, wenn er gedreht wird.

In der nächsten Version. der Text der Rückseite div hat von der Vorderseite verschwunden wie erwartet.

To Do: Die Karte ist noch nicht kippen. Lassen Sie uns ein Click-Ereignis zu app.js hinzufügen, die die Karte über wird Flip (oder, technisch, fügen Sie eine Klasse, die den Text über in der CSS-Flip wird). Denken Sie daran, von früher, dass wir das gesamte Flashcard div spiegeln möchten. nicht nur die einzelnen Seiten. Also auf klicken, werden wir eine Klasse auf der Flashkarte div wechseln.

Wir werden genau die gleiche „verwandeln“ Eigenschaft verwenden, um die Flashkarte div zu drehen, so lassen Sie sich einfach die „gekippt“ Klasse an den vorhandenen Code für das „zurück“ div hinzuzufügen.

Tun. Wir können nicht wirklich die Animation im Moment sehen. Er schaltet nur hin und her zwischen den Seiten. Um den Übergang zu verlangsamen, können wir die „Übergang“ Eigenschaft verwenden. Die „Übergangs“ Eigentum beobachtet den Wert einer bestimmten Eigenschaft, und wenn diese Eigenschaft ändert, verlangsamt den Übergang von einem Wert zum anderen in einer vorgegebenen Menge an Zeit. Diese Eigenschaft muss auf dem „Flashcard“ div eingestellt werden, weil es das Element ist, das auf Klick tatsächlich rotierenden wird.

Denn jetzt lassen Sie uns das Flip gesetzt in „0.3s“ und achten Sie auf „alle“ Eigenschaftsänderungen auf „Flashcard“ passieren, nur um sicher zu sein.

Hooray, können wir die Rotation sehen. Aber die Animation sieht immer noch ein wenig „off“. Das Problem ist die Perspektive. Wir haben nicht den Browser, von dem Punkt gesagt, dass wir die Animation sehen möchten, und die Standard sieht nicht groß.

Zum Glück können wir die Eigenschaft -webkit-Perspektive verwenden, um den Betrachtungsabstand einzustellen. Je größer der Wert auf dieser Eigenschaft, die weiter weg sind Sie von der „Bühne“. „1000“ soll für diese Animation über Recht sein - wir haben weit weg genug, um die volle Flip zu sehen.

Das Flip sieht jetzt richtig. Versuchen Sie, um mit dem Wert von „Perspektive“ zu spielen - Sie werden sehen, dass, wenn es zu klein wird, die Animation riesig wird.

Das Letzte, was - lassen Sie sich den Text ein bisschen größer machen und die div Zentrum:

Das führt uns zu dem endgültigen Produkt hier.

Vollständiger Code unten: