Mentre lavoravo a un post recente che utilizzava le transizioni CSS, mi sono imbattuto in alcune interessanti rivelazioni per sbaglio. Il passaggio dove posizioni la sintassi di transizione può avere un effetto drammatico su come viene eseguita la transizione.
Oggi esamineremo le varie opzioni per la sintassi della transizione CSS e il modo in cui ciascuna di esse influisce sull'animazione data se il mouse sta entrando o uscendo da un hover.
Eventi del mouse in CSS
Le transizioni CSS ci danno la straordinaria capacità di implementare semplici animazioni senza JavaScript. Tuttavia, dal momento che non si parla molto di CSS in CSS, si potrebbe pensare che la differenza tra gli effetti del mouse e del mouse sarebbe ancora qualcosa nel regno di JavaScript. Dopo tutto, non c'è supporto per qualcosa di simile:
Tuttavia, risulta che puoi effettivamente controllare efficacemente queste due diverse variabili. Semplicemente non è un processo molto intuitivo. Diamo un'occhiata a come funziona.
Se vuoi saltare la discussione e passare direttamente alla sintassi, CSS Tricks ha un buon esempio di questa tecnica.
The Normal Syntax: Mouse In e Out sono uguali
Esistono diversi modi per applicare una transizione CSS. Il primo che vedremo è il semplice vecchio standard, il che significa che useremo la sintassi standard che troverai se esegui una ricerca su Google su come implementare una transizione CSS.
A scopo di sperimentazione, terremo la demo semplice. Vogliamo che la transizione animi il passaggio da un quadrato nero a un cerchio grigio. Ecco come appare (prefissi del browser omessi per la pulizia):
Il comportamento di questa animazione è tipico. Quando passi il mouse sopra il quadrato nero, nel giro di un secondo ruota intorno al raggio di 100px e cambia colore diventando un cerchio grigio. Quindi quando togli il tuo mouse, succede il contrario. Il quadrato ruota in senso antiorario fino alla sua posizione originale, il suo raggio di confine diminuisce costantemente e il suo colore torna al nero.
demo: Clicca qui per vedere questo esempio in azione.
Sintassi inversa: nessuna transizione di uscita del mouse
Nell'esempio precedente, abbiamo inserito la sintassi di transizione nel file #loremdiv selettore. Cosa succede se invertiamo questo e inseriamo lo stesso snippet all'interno del #loremdiv: hover selettore?
Anche se sembra sbagliato, si scopre che questo produce ancora una transizione. Tuttavia solo produce una transizione sull'evento hover, quando l'utente esce dall'hover, la trasformazione è immediata.
Questo ci dà effettivamente quello che stavamo cercando: un modo per variare le transizioni del mouse e del mouse. Tuttavia, il mouse fuori non è affatto una transizione a questo punto, il che non è molto eccitante.
demo: Clicca qui per vedere questo esempio in azione.
Sintassi raddoppiata: due transizioni personalizzabili
Ora abbiamo provato a collegare la transizione al selettore normale e abbiamo provato a inserirla nel selettore al passaggio del mouse, ora vediamo cosa succede quando inseriamo una transizione in tutti e due posti.
Si noti che ho ridotto la quantità di tempo nella prima transizione in modo da poter dire cosa fa. È interessante notare che il risultato qui è l'opposto di quello che molti si aspettano.
Intuitivamente, potresti giungere alla conclusione che la prima istruzione di transizione verrà applicata al mouse e il secondo al mouse. Comunque, l'opposto è vero. Come abbiamo scoperto nel nostro ultimo esempio, lo snippet associato al selettore al passaggio del mouse influenza il mouse nell'evento, lasciando l'altro per il mouse.
Ora abbiamo il setup che stavamo girando! Questo ci dà la completa libertà di variare gli effetti del mouse in e del mouse out. Quello che ho fatto con questo esempio è ridurre la quantità di tempo necessaria per completare l'animazione quando l'utente esce dall'hover.
demo: Clicca qui per vedere questo esempio in azione.
Variare gli effetti
Prendendo questa idea ancora di più, puoi non solo variare il tempo, puoi anche variare la proprietà e la funzione di cronometraggio. Ecco un esempio:
Qui mi sono bloccato con la stessa animazione che stavamo usando per l'evento hover, ma quando l'utente esce dall'hover, l'unica cosa che ritorna è il raggio del bordo.
demo: Clicca qui per vedere questo esempio in azione.
Conclusione
Per riassumere, ci sono tre modi fondamentali per approcciare le transizioni CSS. Il primo modo è quello di collegare la transizione a un selettore non al passaggio del mouse. Questo rende il passaggio del mouse all'interno e all'esterno delle transizioni allo stesso modo (solo al contrario, ovviamente). Il secondo modo è di collegare la transizione a un selettore al passaggio del mouse. Questo crea un passaggio del mouse in transizione, ma elimina la transizione al passaggio del mouse.
Infine, il terzo modo è quello di collegare le transizioni ad entrambi i selettori.In questo caso, la transizione non al passaggio del mouse influenzerà il passa il mouse evento e la transizione al passaggio del mouse avrà effetto sul al passaggio del mouse evento. Questa è la tecnica con cui vorresti andare se vuoi il massimo controllo sugli eventi separati.
Lascia un commento qui sotto e facci sapere cosa pensi di tutto questo. Ti sei mai accorto che erano possibili eventi di hover in / out separati? Hai utilizzato questo in qualche modo?