Mastering Mus Ange och avsluta händelser med CSS-övergångar

Samtidigt som jag arbetade på en ny post som utnyttjade CSS-övergångar, snubblat jag på några intressanta uppenbarelser helt av misstag. Om du växlar upp var du placerar övergångssyntaxen kan det få en dramatisk effekt på hur övergången utförs.

Idag ska vi gå över de olika alternativen för CSS-övergångssyntaxen och hur varje påverkar animeringen som ges om musen kommer in eller lämnar en svängare.

Mushändelser i CSS

CSS-övergångar ger oss den fantastiska förmågan att implementera enkla animeringar utan JavaScript. Men eftersom det verkligen inte är mycket att prata om i CSS, skulle du tro att det var annorlunda med musen och effekterna av musen skulle fortfarande vara någonting rätt i JavaScript. Det finns trots allt inget stöd för något sådant:

Det visar sig dock att du faktiskt kan kontrollera dessa två olika variabler. Det är helt enkelt inte en väldigt intuitiv process. Låt oss ta en titt på hur det fungerar.

Om du vill hoppa över diskussionen och gå direkt till syntaxen, har CSS Tricks ett bra exempel på denna teknik.

Normal syntax: Mus in och ut är lika

Det finns några olika sätt att vi kan gå om att tillämpa en CSS-övergång. Den första vi tittar på är vanlig gammal standard, vilket innebär att vi använder den vanliga syntaxen som du hittar om du kör en Google-sökning för hur du implementerar en CSS-övergång.

För experimenteringsändamål håller vi demo enkelt. Vi vill övergången för att animera övergången från en svart kvadrat till en grå cirkel. Så här ser det här ut (webbläsarens prefix utelämnas för renhet):

Uppförandet av denna animering är typiskt. När du svävar över den svarta torget, vinner den i en sekund som den ökar sin radie till 100 px och ändrar sin färg och gör den till en grå cirkel. Då när du tar ut musen sker det motsatta. Torget vrider moturs till dess ursprungliga läge, dess gränsenradie minskar stadigt och färgen går tillbaka till svart.

demo: Klicka här för att se detta exempel i aktion.

Reversed Syntax: No Mouse Out Transition

I det föregående exemplet placerade vi övergångssyntaxen i #loremdiv väljare. Vad händer om vi vänder om det här och lägger samma utdrag inuti #loremdiv: svävar väljare?

Även om det känns fel, visar det sig att detta fortfarande ger en övergång. Men det endast producerar en övergång på svävarhändelsen, när användaren lämnar svävaren är omvandlingen omedelbar.

Detta ger oss effektivt det vi letade efter: ett sätt att variera musen i och musen övergångar. Men musen är verkligen ingen övergång alls vid denna tidpunkt, vilket inte är väldigt spännande.

demo: Klicka här för att se detta exempel i aktion.

Dubbelsyntax: Två anpassningsbara övergångar

Nu har vi försökt koppla övergången till normalväljaren och vi har försökt sätta den i svängväljaren, nu får vi se vad som händer när vi övergår till både platser.

Observera att jag har minskat tiden på den första övergången så att vi kan berätta vad det gör. Intressant nog, resultatet här är motsatsen till vad många människor förväntar sig.

Intuitivt kan du komma fram till att den första övergångsdeklarationen kommer att appliceras på musen och den andra på musen ut. Det motsatta är emellertid sant. Såsom vi upptäckte i vårt senaste exempel påverkar snippet associerat med svängväljaren musen i händelse och lämnar den andra för musen ut.

Nu har vi den inställning som vi skjuter för! Detta ger oss fullständig frihet att variera musen i och musen ut effekter. Vad jag har gjort med detta exempel minskar den tid det tar för animationen att slutföra när användaren lämnar svävaren.

demo: Klicka här för att se detta exempel i aktion.

Variera effekterna

Med den här tanken ytterligare, kan du inte bara variera tiden, du kan också variera egenskapen och tidsfunktionen. Här är ett exempel:

Här stannar jag med samma animation som vi har använt för svävarhändelsen, men när användaren lämnar svävaren, är det enda som animerar tillbaka gränsradie.

demo: Klicka här för att se detta exempel i aktion.

Slutsats

Sammanfattningsvis finns det tre grundläggande sätt att närma sig CSS-övergångar. Det första sättet är att koppla övergången till en icke-svängningsväljare. Detta gör svävaren in och ut övergångar samma (endast omvänd naturligtvis). Det andra sättet är att koppla övergången till en svängväljare. Detta skapar en svängare i övergång men eliminerar överflyttningen från svängaren.

Slutligen är det tredje sättet att koppla övergångar till båda selektorerna.I det här fallet påverkar överflyttningen inte sväva ut händelse och svängningsövergången påverkar sväva in händelse. Det här är den teknik som du vill gå med om du vill ha mest kontroll över de separata händelserna.

Lämna en kommentar nedan och låt oss veta vad du tycker om allt detta. Har du någonsin märkt att separata svävar in / ut händelser var möjliga? Har du använt detta på något sätt?