Come mostrare e nascondere un Div con la transizione in CSS

In questo manuale impareremo la procedura per mostrare e nascondere il div con il simbolo “ transizione ” proprietà dei CSS.

Come mostrare e nascondere un Div con la transizione in CSS?

Il CSS” transizione ” consente di modificare facilmente il valore della proprietà in base a un periodo specifico. Può essere un elemento mobile o attivo, a seconda del suo stato. Inoltre, la proprietà di transizione dei CSS viene utilizzata per mostrare e nascondere il div in HTML.

Passiamo ora alla sintassi della proprietà di transizione.

Sintassi

Ci sono due cose che devi specificare quando crei un effetto di transizione:

• Aggiungi un effetto a una proprietà CSS.
• Imposta la durata dell'effetto.

Fondamentalmente, ' transizione ” è una proprietà abbreviata composta da altre quattro proprietà, che sono riportate di seguito:

Ecco la descrizione delle proprietà citate:

• proprietà di transizione: Viene utilizzato per impostare la transizione a qualsiasi proprietà CSS. Come larghezza, altezza, opacità e molti altri.
• durata della transizione: Viene utilizzato per specificare la durata della transizione.
• funzione di temporizzazione di transizione: Viene utilizzato per impostare la velocità della transizione.
• ritardo di transizione: Specifica l'ora in cui la transizione inizia o ritarda.

Facciamo un esempio in cui mostreremo e nasconderemo il div con il ' transizione ” proprietà dei CSS. A tal fine, per prima cosa, creiamo un ' div ' e un tipo di input ' casella di controllo ”.

Passaggio 1: creare e definire lo stile div

All'interno del tag

HTML

Di seguito, modelleremo il div utilizzando la proprietà background-color e imposteremo il colore dello sfondo come ' RGB(238, 190, 118) ”. Imposteremo l'altezza del div come ' 150px ' e regola il bordo attorno ad esso come ' 10px ”, “ cresta ', e ' RGB(6, 56, 2) ”. Alla fine, specificheremo la dimensione del carattere come ' 50px ”.

CSS

Di seguito è riportato l'output del codice sopra descritto. Qui puoi vedere che il div e la casella di controllo sono stati creati correttamente:

Ora, passa al passaggio successivo in cui nascondiamo e mostriamo il div usando la proprietà di transizione.

Passaggio 2: mostra e nascondi un Div con la transizione

Per fare ciò, imposteremo l'effetto di transizione impostando ' opacità ”, la sua durata come “ 2s ”, e il valore di opacità come “ 0 ” nella classe div che abbiamo creato nei CSS:

Nota: Applicheremo la transizione su “ opacità ” per impostare la trasparenza dell'elemento. Qui, specificheremo il suo valore come ' 0 ”, il che significa che quando inizia la transizione, il div sarà nascosto per due secondi.

Dopo aver impostato i valori di transizione, useremo ' ingresso ” per accedere al tipo di input creato nel file HTML e impostare la pseudo-classe dell'elemento di input come “ :controllato ”. Quindi, accederemo al div creato e al ' + ” sarà utilizzato per associare la checkbox al div. Pertanto, quando viene eseguita un'operazione sulla casella di controllo, il suo utilizzo influenzerà il div. Successivamente, imposteremo il valore di opacità come ' 1 ”:

Nota: Specifichiamo il valore di opacità come ' 1 ”, il che significa che quando la casella di controllo è contrassegnata, verrà mostrato il div creato. Inoltre, deselezionalo per nascondere il div

Come puoi vedere, il div viene mostrato e nascosto usando il ' transizione ” proprietà e “ :controllato ” elemento di pseudo-classe:

Abbiamo spiegato il metodo per nascondere e mostrare un div con proprietà di transizione in CSS.

Conclusione

Per mostrare e nascondere un div, il ' transizione ” proprietà e “ :controllato ” l'elemento pseudo-classe viene utilizzato in modo tale che il valore di div opacity sia impostato come “ 0 ”, e in :checked elemento pseudo-classe, imposta l'opacità come “ 1 ”. Quando l'utente fa clic sulla casella di controllo, il div verrà visualizzato e, quando viene deselezionato, il div verrà nascosto. In questo manuale abbiamo descritto il metodo per nascondere e mostrare div utilizzando la proprietà di transizione.