Ciao a tutti.
In questa lezione parleremo delle transizioni.
Hai visto in diversi esempi che possiamo cambiare lo stato degli elementi.
I link possono andare da link regolari a visitati.
Puoi passare il mouse sopra le cose.
Puoi concentrarli.
Beh, e se volessi avere un po' di animazione
quando fai queste cose?
Questo è ciò per cui possiamo usare le transizioni.
Quindi, se passi il mouse sopra il link, puoi cambiare il colore.
Se un'immagine viene messa a fuoco,
ovvero è stata inserita una scheda, è possibile modificare le dimensioni.
Ed è solo queste piccole cose che a volte,
quando fai la tua pagina, ti dà quel piccolo fattore interessante che
stavi cercando, per dimostrare che stai davvero iniziando a cogliere questi concetti.
Quindi iniziamo.
Se si desidera aggiungere transizioni alla pagina,
ci sono quattro proprietà che si desidera esaminare.
Il primo è la proprietà di transizione effettiva.
Cos' è che vuoi cambiare?
Vuoi cambiare la dimensione, il colore, la posizione, tutti?
E la durata della transizione?
Quanto tempo dovrebbe durare ogni transizione?
Possono accadere molto rapidamente, dove la gente quasi non se ne accorge, o
può essere molto lunga e tirata fuori.
Il tempo di transizione è, è un po 'strano, ma è questa idea di,
se hai intenzione di fare qualcosa di più grande, vuoi renderlo lentamente più grande e
lineare tutto allo stesso tempo o vuoi che entri o si allontani?
Puoi effettivamente cambiare come, tipo di quale velocità sta facendo le diverse cose.
Il ritardo di transizione è, vuoi che aspetti,
il browser dovrebbe aspettare prima che inizi la transizione?
Se qualcuno è in bilico, vuoi che si alzi per due secondi prima che tu vada avanti?
Potresti pensare a questo, perché a volte quando
le persone guardano la tua pagina, hanno, appena fatto girare il mouse dappertutto.
E non vuoi che guardino le transizioni a meno che non abbiano davvero bisogno
di concentrarsi su quell'unico elemento.
Va bene.
Quindi andiamo avanti e iniziamo.
Se vuoi usare le transizioni, la prima cosa che devi fare è
solo quello che hai fatto fin dall'inizio, definire il tuo elemento e
dire quale stile vuoi che abbia quando carichi la pagina per la prima volta.
Successivamente, si desidera scegliere quali elementi si desidera passare.
Quindi potresti averlo disegnato con il colore di sfondo, il colore, la larghezza e l'altezza.
Non vuoi necessariamente cambiare tutte queste cose
quando entri nella tua transizione.
Quindi scegli quelli che vuoi cambiare.
In terzo luogo, definire i nuovi valori per tali elementi.
E questo è importante.
È necessario combinare questo passaggio con una pseudo-classe.
Deve essere insieme a un passaggio del mouse o un focus o un attivo.
Quindi diamo un'occhiata a un codice solo sullo schermo, e
poi ti eseguirò attraverso un esempio reale.
Quindi qui, sono andato, sono andato avanti e ho definito un div per avere solo colore,
sfondo, altezza della linea, altezza della larghezza, tutte le cose tipiche.
Se notate, il raggio di bordo è piuttosto piccolo.
Sono solo sei pixel.
Poi, sono entrato e ho detto, sai una cosa, ho intenzione di andare avanti e
definire ognuna di queste proprietà.
Quindi le mie proprietà che voglio cambiare saranno colore, larghezza, sfondo
e raggio del bordo.
Questo è un po 'un sacco, ma volevo un grande esempio.
Puoi dire che voglio che ci vorra' mezzo secondo,
voglio che sia tutto piu' o meno lo stesso cambiamento, e
voglio che aspetti mezzo secondo prima di iniziare quella transizione.
L' ultimo passo, quello che aveva a che fare con la pseudo-classe,
era aggiungere il div:hover e dare i nuovi valori che voglio che tutto sia.
Quindi, invece di essere nero, voglio passare al bianco.
Invece di una larghezza di 250 pixel, voglio che sia 350, un
colore di sfondo diverso e un raggio di bordo molto più grande.
Tutto bene? Quindi andiamo avanti e
guardiamo un esempio che ho.
Ho gia' programmato per mostrartelo.
Quindi in questo esempio ho usato un foglio di stile interno,
in parte perché l'intera maggior parte del mio HTML è proprio qui sotto.
Tutto quello che ho è un div.
Come ho stilato è dire che per ora in poi quando qualcuno passa sopra questo div,
voglio che tu cambi il colore con lo sfondo e il raggio del bordo.
E ho anche messo in attivo,
solo perché volevo mostrarti che puoi fare più stati diversi.
Attivo, se lo hai, forse non ricordo, è quando stai facendo clic su uno stato.
Quindi diamo un'occhiata.
Ecco la mia transizione, solo per impostazione predefinita, quando stai guardando la pagina.
Ora, quando ci faccio il mouse sopra,
puoi vedere che è una specie di questo fresco cambiamento di colore e raggio di bordo. Il
raggio di bordo in realtà può cambiare le cose dall'aspetto di un quadrato
all'aspetto di un cerchio.
L' ultimo è ora che tengo premuto il mouse verso il basso e
vedremo cosa succede quando lo stato entra in attivo.
Vedi, ancora una volta, ho cambiato tutte queste cose.
In realta' penso che sia piuttosto figo.
Può anche, tuttavia, essere molto distrattivo.
Quindi vuoi usare le transizioni con parsimonia
per assicurarti di non portare via le cose dalla tua pagina.
È possibile e
molto comune usare la stenografia quando stai scrivendo le tue diverse transizioni.
Invece di scrivere durata della transizione
, proprietà, cose diverse del genere, puoi mettere tutto in un'unica riga.
Questo sta dicendo che voglio cambiare lo sfondo, dovrebbero volerci 2 secondi, e
voglio facilitarmi o voglio che sia una transizione lineare.
Qui, sta dicendo che voglio andare avanti e cambiare il raggio di confine, quanto tempo
dovrebbe richiedere, il tipo di transizione e quanto tempo si desidera ritardare.
Quindi, quando guardi il codice di altre persone,
non essere confuso se non assomiglia al mio primo esempio.
Probabilmente hanno usato le scorciatoie.
Va bene.
Quindi, spero che sia stato un po 'bello e sei entusiasta di andare a
implementare una sorta di transizioni sulla tua pagina.
Giocare con loro farà anche di più che rendere il vostro sito un aspetto tipo di
colorato e attivo.
Sta per dare pratica sulla comprensione di queste diverse
pseudo-classi e stati come attivo, messa a fuoco, hover, ecc
Ma si prega di ricordare che l'accessibilità sarà sempre un problema
quando si ha a che fare con diversi stati sulla pagina.
Non richiedere che le persone stiano andando a passare il mouse sulla tua pagina.
Non richiedere che le persone stiano andando a passare attraverso.
Vuoi assicurarti che tutti i tuoi contenuti siano sempre disponibili, e
basta mantenere quelle transizioni per qualcosa di un po 'di più da aggiungere al tuo sito.
Buona fortuna.