Come impostare l'altezza di transizione in CSS

Nelle applicazioni Web, è necessario trasmettere il messaggio in modo efficiente. Gli sviluppatori consegnano i loro concetti ai loro spettatori in modo migliore usando le animazioni. Per impostare diverse proprietà dell'animazione, come gli stati e la velocità, vengono utilizzate le transizioni. In CSS, le transizioni aiutano ad applicare vari effetti su elementi HTML come durata e ritardo.

Come impostare l'altezza di transizione in CSS?

In CSS, l'altezza di transizione può essere impostata utilizzando le seguenti proprietà:

• Proprietà di transizione
• trasformarsi con proprietà di transizione

Quindi, iniziamo con il metodo uno!

Metodo 1: impostare l'altezza di transizione usando la proprietà di transizione CSS

UN "transizione"È un lasso di tempo impostato specificando lo stato iniziale e finale di un elemento. È la proprietà stensa di tutte le proprietà di transizione di Longhand, come la durata della transizione o la proprietà di transizione.

Andiamo avanti e prendiamo un esempio per capire come utilizzare la proprietà di transizione per impostare l'altezza di transizione.

Esempio 1

All'interno del file HTML, specificare il “"Tra i tag.

Html

Innanzitutto, specificheremo il "colore di sfondo"Proprietà con valore"arancia". Quindi, assegnare le proprietà dell'altezza e della larghezza con i valori "100px" E "50px". Ora, imposta il "transizione"Proprietà con il"Altezza 1s" valore; Altezza 1S Specifica che l'elemento eseguirà l'azione assegnata in un secondo in una direzione verticale.

Nel prossimo passaggio, useremo il selettore ": Hover"Con Element Div e imposta la proprietà di altezza come"200px". Questo farà espandere la linea verticale da 100px a 200px quando litighiamo il nostro puntatore sull'elemento.

CSS

div
Background-color: Orange;
Altezza: 100px;
larghezza: 50px;
transizione: altezza 1s;

div: hover
Altezza: 200px;

Salviamo il codice menzionato ed eseguiamolo nel browser:

Come puoi vedere nell'output sopra, l'altezza di transizione è stata impostata correttamente.

Metodo 2: impostare l'altezza di transizione usando la proprietà CSS Transform

Le variazioni 2D o 3D che possono essere implementate su elementi HTML derivano dal “trasformare" proprietà. È possibile eseguire azioni diverse utilizzando questa proprietà, come scala, inclinazione, traduci e ruota. Se non sei a conoscenza di queste operazioni menzionate, dai un'occhiata a questo articolo dedicato.

Esempio

Imposteremo il valore di "trasformare"Proprietà come"Scaley (1)"; Qui, la scala viene utilizzata per regolare un elemento in verticale e passare "1"Poiché il suo argomento aumenterà l'altezza. Imposteremo il "Transform-origin"Proprietà con il valore"superiore", Il che indica che la trasformazione verrà applicata dal punto superiore. Ora daremo un valore alla proprietà di transizione "trasforma 1s, 1s", Dove il primo 1 è per la larghezza e l'altro è per l'altezza; Ciò specificherà la trasformazione di un secondo sull'elemento selezionato.

Usa il selettore del mouse e assegna la proprietà Transform un valore "Scaley (1.1)". Di conseguenza, quando il puntatore viene posizionato sull'elemento, le sue dimensioni aumenteranno, rispettivamente.

CSS

div
Background-color: Orange;
Altezza: 100px;
larghezza: 50px;
Trasformazione: Scaley (1);
Transform-Origin: top;
Transizione: trasformazione 1s, 1s;

div: hover
Altezza: 200px;
Trasformazione: Scaley (1.1);

Produzione

Abbiamo coperto come impostare l'altezza di transizione in CSS.

Conclusione

Per impostare l'altezza di transizione, il "transizione"La proprietà può essere utilizzata. Ci vuole il valore dei secondi come argomento per eseguire un'azione specifica per un certo tempo. Inoltre, CSS "trasformare"La proprietà insieme alla transizione può essere utilizzata anche in cui è necessario specificare la scala di trasformazione e l'origine per ottenere i risultati desiderati. Questa guida dimostra tutti i metodi efficienti per impostare l'altezza di transizione in CSS.