Hallo, alle.
In diesem Vortrag werden wir über Übergänge sprechen.
Sie haben in verschiedenen Beispielen gesehen, dass wir den Zustand der Elemente ändern können.
Links können von regulären Link zu besucht gehen.
Du kannst den Mauszeiger über die Dinge bewegen.
Sie können sie fokussieren.
Nun, was, wenn Sie tatsächlich ein bisschen fast Animation haben wollen,
wenn Sie diese Dinge tun?
Dafür können wir Übergänge verwenden.
Wenn Sie also den Mauszeiger über den Link bewegen, können Sie die Farbe ändern.
Wenn ein Bild in den Fokus gerückt ist, das
heißt, Sie haben es mit Tabs versehen, können Sie die Größe ändern.
Und es sind nur diese kleinen kleinen Dinge, die manchmal,
wenn Sie Ihre Seite erstellen, gibt Ihnen das kleine bisschen coole Faktor, nach dem Sie
gesucht haben, um zu zeigen, dass Sie wirklich anfangen, diese Konzepte zu erfassen.
Also lasst uns anfangen.
Wenn Sie Übergänge zu Ihrer Seite hinzufügen
möchten, können Sie sich vier Eigenschaften ansehen.
Die erste ist die eigentliche Übergangseigenschaft.
Was willst du ändern?
Möchten Sie die Größe, die Farbe, die Position, alle von ihnen ändern?
Was ist mit der Übergangsdauer?
Wie lange sollte jeder Übergang dauern?
Sie können sehr schnell passieren, wo die Leute es fast nicht einmal bemerken, oder
es kann wirklich lang und ausgezogen sein.
Der Übergang Timing ist, es ist ein bisschen seltsam, aber es ist diese Idee,
wenn Sie etwas größer machen wollen, wollen Sie es langsam größer und
linear alle zur gleichen Zeit machen oder wollen Sie, dass es sich erleichtert oder erleichtert?
Sie können tatsächlich ändern, wie, Art von welcher Geschwindigkeit es die verschiedenen Dinge macht.
Übergangsverzögerung ist, wollen Sie, dass ich warten soll,
sollte der Browser warten, bevor er zu wechseln beginnt?
Wenn jemand schwebt, willst du, dass er zwei Sekunden lang schwebt, bevor du weitermachst?
Vielleicht möchten Sie darüber nachdenken, denn manchmal, wenn
Leute auf Ihre Seite schauen, haben sie, haben sie gerade die Maus über.
Und Sie möchten nicht, dass sie sich die Übergänge ansehen, es sei denn, sie
müssen sich wirklich auf dieses eine Element konzentrieren.
In Ordnung.
Also lasst uns weitermachen und loslegen.
Wenn Sie Übergänge verwenden möchten, ist das erste, was Sie tun müssen,
genau das, was Sie die ganze Zeit getan haben, definieren Sie Ihr Element und
sagen Sie, welchen Stil Sie es haben möchten, wenn Sie die Seite zum ersten Mal laden.
Als Nächstes möchten Sie auswählen, welche Elemente Sie übergehen möchten.
So können Sie es mit Hintergrundfarbe, Farbe, Breite und Höhe gestylt haben.
Sie wollen nicht unbedingt all diese Dinge ändern,
wenn Sie in Ihren Übergang gehen.
Wählen Sie also diejenigen aus, die Sie ändern möchten.
Drittens definieren Sie die neuen Werte für diese Elemente.
Und das ist wichtig.
Sie müssen diesen Schritt mit einer Pseudo-Klasse kombinieren.
Es muss zusammen mit einem Hover oder einem Fokus oder einem aktiven sein.
Schauen wir uns also etwas Code nur auf dem Bildschirm an, und
dann werde ich Sie durch ein tatsächliches Beispiel führen.
Also, hier bin ich gegangen, ich ging voran und habe ein div definiert, um nur Farbe,
Hintergrund, Zeilenhöhe, Breitenhöhe, all die typischen Dinge zu haben.
Wenn Sie bemerken, ist der Randradius ziemlich klein.
Es sind nur sechs Pixel.
Als nächstes ging ich rein und sagte, du weißt was, ich werde voran gehen und
jede dieser Eigenschaften definieren.
Meine Eigenschaften, die ich ändern möchte, werden Farbe, Breite, Hintergrund
und Rahmenradius sein.
Das ist ziemlich viel, aber ich wollte ein großes Beispiel.
Sie können sagen, ich möchte, dass es eine halbe Sekunde dauert,
ich möchte, dass alles so ziemlich die gleiche Veränderung ist, und
ich möchte, dass Sie eine halbe Sekunde warten, bevor Sie mit dem Übergang beginnen.
Der letzte Schritt, der mit der Pseudo-Klasse zu tun hatte,
war das Hinzufügen des div: hover und das Geben der neuen Werte, die ich wollen, dass alles sein soll.
Also, anstatt schwarz zu sein, möchte ich es auf Weiß umstellen.
Anstatt die Breite von 250 Pixel beträgt, möchte ich, dass sie 350, eine
andere Hintergrundfarbe und einen viel größeren Rahmenradius haben.
In Ordnung? Also lassen Sie uns voran und
schauen uns ein Beispiel an, das ich habe.
Ich habe bereits programmiert, um es dir zu zeigen.
In diesem Beispiel habe ich ein internes Stylesheet verwendet,
teilweise weil der gesamte Großteil meines HTML hier unten ist.
Alles, was ich habe, ist ein div.
Wie ich es gestylt habe, ist zu sagen, dass für jetzt, wenn jemand über diesem div schwebt,
ich möchte, dass Sie die Farbe mit Hintergrund und Rahmenradius ändern.
Und ich habe auch aktiv,
nur weil ich Ihnen zeigen wollte, dass Sie mehrere verschiedene Zustände tun können.
Aktiv, wenn Sie haben, vielleicht nicht erinnern, ist, wenn Sie nach unten auf einen Zustand klicken.
Also schauen wir uns mal an.
Hier ist mein Übergang, nur standardmäßig, wenn Sie auf die Seite schauen.
Wenn ich den Mauszeiger darüber ziehe,
kann man sehen, dass es eine Art coole Veränderung der Farbe und des Randradius ist.
Der Grenzradius kann tatsächlich Dinge ändern, von einem Quadrat
zu einem Kreis auszusehen.
Die letzte ist jetzt, ich werde die Maus gedrückt halten und
wir werden sehen, was passiert, wenn der Zustand aktiv wird.
Du siehst mal wieder, ich habe all diese Dinge verändert.
Ich denke, das ist ziemlich cool.
Es kann aber auch sehr ablenkend sein.
Sie möchten also Übergänge sparsam verwenden,
um sicherzustellen, dass Sie keine Dinge von Ihrer Seite wegnehmen.
Es ist möglich und
sehr häufig, Abkürzung zu verwenden, wenn Sie Ihre verschiedenen Übergänge schreiben.
Anstatt Übergangsdauer,
Eigenschaften, verschiedene Dinge wie diese zu schreiben, können Sie alles in einer Zeile setzen.
Dieser sagt, ich möchte den Hintergrund ändern, es sollte 2 Sekunden dauern, und
ich möchte es erleichtern oder ich möchte, dass es ein linearer Übergang ist.
Hier heißt es, ich möchte voran gehen und den Grenzradius ändern, wie lange es
dauern sollte, die Art des Übergangs und wie lange Sie verzögern möchten.
Wenn Sie also den Code anderer Leute betrachten,
seien Sie nicht verwirrt, wenn es nicht wie mein erstes Beispiel aussieht.
Sie haben wahrscheinlich die Tastenkombinationen verwendet.
In Ordnung.
Hoffentlich war das ein bisschen cool und Sie sind aufgeregt,
einige Art von Übergängen auf Ihrer Seite zu implementieren.
Spielen mit ihnen wird auch mehr tun, als Ihre Website aussehen Art von
bunt und aktiv.
Es wird Ihnen üben, diese verschiedenen
Pseudo-Klassen und Zustände wie aktiv, Fokus, Hover usw. zu verstehen.
Aber denken Sie daran, dass Barrierefreiheit immer ein Problem sein wird,
wenn Sie mit verschiedenen Zuständen auf Seite zu tun haben.
Erfordern Sie nicht, dass die Benutzer auf Ihrer Seite schweben.
Erfordern Sie nicht, dass die Leute durchlaufen werden.
Sie möchten sicherstellen, dass alle Ihre Inhalte immer verfügbar sind, und
halten Sie diese Übergänge einfach für etwas extra, das Sie Ihrer Website hinzufügen können.
Viel Glück.