Con l'introduzione di CSS3 abbiamo la possibilità di creare transizioni per dare un'animazione agli oggetti in maniera nativa e quindi senza utilizzare framework di terze parti. Grazie a questa caratteristica possiamo decidere quali proprietà di un oggetto animare e quanto tempo far durare l'animazione facendo così in modo che la transizione da un valore all'altro della proprietà sia animata.
In questo script vediamo come ridurre le dimensioni di un pulsante nel momento in cui l'utente lo preme
<html> <head> <style type="text/css"> .box { width: 100px; height: 100px; line-height: 100px; text-align:center; -moz-transition:200ms; -webkit-transition:200ms; transition:200ms; } .box:active { transform: scale(0.9, 0.9); } </style> </head> <body> <input type="button" class="box" value="text"/> </body> </html>
La classe CSS box ha la proprietà transition (inclusi i prefissi per i diversi vendor) che specifica che le animazioni durano 200 millisecondi. Non avendo specificato quali proprietà vogliamo animare, tutte le proprietà sono automaticamente animate. Nella classe col selettore active (che si attiva quando l'utente preme il pulsante) specifichiamo che il pulsante deve ridurre le proprie dimensioni del 10%.
Grazie alla prorietà CSS transition, questa riduzione sarà animata e durerà 200 millisecondi.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Creare form tipizzati con Angular
Le novità di Angular: i miglioramenti alla CLI
Gestire undefined e partial nelle reactive forms di Angular
Configurare policy CORS in Azure Container Apps
Ottimizzazione dei block template in Angular 17
Utilizzare HiLo per ottimizzare le insert in un database con Entity Framework
Creare un'applicazione React e configurare Tailwind CSS
Semplificare il deployment di siti statici con Azure Static Web App
Recuperare un elemento inserito nella cache del browser tramite API JavaScript
Eseguire le GitHub Actions offline
Usare Refit e Polly in Blazor per creare client affidabili e fortemente tipizzati
Ottimizzare le performance delle collection con le classi FrozenSet e FrozenDictionary
I più letti di oggi
- Ottimizzare le performance delle collection con le classi FrozenSet e FrozenDictionary
- ASP.NET 3.5 per tutti
- .NET Conference Italia 2023 - Milano e Online
- Sblocca le performance della tua applicazione con .NET 8
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!