Come mostrare e nascondere un div con transizione in CSS

Lo scopo principale dei div è quello di dividere una pagina in sezioni diverse e modellarle di conseguenza. In confronto, lo styling a Div è relativamente semplice a causa dei suoi ID e attributi. Inoltre, visualizzare e nascondere i Div fa anche parte dello stile.

In questo manuale, impareremo la procedura per mostrare e nascondere il div con il "transizione"Proprietà di CSS.

Come mostrare e nascondere un div con transizione in CSS?

Il CSS "transizione"La proprietà semplifica la modifica del valore della proprietà in base a un periodo specifico. Può essere un elemento galleggiante o attivo, a seconda del suo stato. Inoltre, la proprietà di transizione di CSS viene utilizzata per mostrare e nascondere il Div in HTML.

Ora, passiamo alla sintassi della proprietà di transizione.

Sintassi

Ci sono due cose che devi specificare durante la creazione di un effetto di transizione:

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

Fondamentalmente, "transizione"È una proprietà stensa composta da altre quattro proprietà, che sono riportate di seguito:

Transizione: Transition-Property Transition-Duration
DEAY TRASSIGNAZIONE TIMINAZIONE DI TRASSEZIONE

Ecco la descrizione delle proprietà menzionate:

• Property 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 transizione: Viene utilizzato per impostare la velocità della transizione.
• Transition-Delay: Specifica il tempo in cui la transizione inizia o ritarda.

Facciamo un esempio in cui mostreremo e nasconderemo il Div con "transizione"Proprietà di CSS. A tale scopo, in primo luogo, creiamo un "div"E un tipo di input"Casella di controllo".

Passaggio 1: crea e stile div

All'interno del tag, aggiungeremo un'etichetta usando il tag e aggiungeremo un tipo di input come "Casella di controllo". Dopodiché, crea un div e chiudi il tag.

Html

Mostra il div
Nascosto div

In seguito, modelleremo il Div usando la proprietà di sfondo e impostare il colore dello sfondo come "RGB (238, 190, 118)". Imposteremo l'altezza del div come "150px"E regola il bordo attorno a esso come"10px","cresta", E "RGB (6, 56, 2)". Alla fine, specificheremo le dimensioni del carattere come "50px".

CSS

div
Background-color: RGB (238, 190, 118);
Altezza: 150px;
Bordo: 10px Ridge RGB (6, 56, 2);
Font-size: 50px;

L'output del codice sopra descritto è riportato di seguito. Qui, puoi vedere che la casella di div e check è creata 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 transizione

Per fare ciò, imposteremo l'effetto di transizione impostando "opacità", La sua durata come"2s", E il valore dell'opacità come"0"Nella classe Div abbiamo creato nel CSS:

transizione: opacità 2s;
opacità: 0;

Nota: Applicheremo la transizione su "opacità"Proprietà per impostare la trasparenza dell'elemento. Qui, specificheremo il suo valore come "0"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 Classe pseudo dell'elemento di input come":controllato". Quindi accederemo al div creato e al "+"L'operatore verrà utilizzato per associare la casella di controllo al div. Pertanto, quando un'operazione viene eseguita sulla casella di controllo, il suo utilizzo influenzerà il div. Successivamente, imposteremo il valore di opacità come "1":

Input: controllato + div
opacità: 1

Nota: Specificheremo il valore dell'opacità come "1", Il che significa che quando la casella di controllo è contrassegnata, verrà mostrato il div creato. Inoltre, non contrassegnarlo per nascondere il div

Come puoi vedere, il div viene mostrato e nascosto usando il "transizione"Proprietà e":controllato"Elemento 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: elemento pseudo-classe controllato, impostare l'opacità come"1". Quando l'utente fa clic sulla casella di controllo, verrà visualizzato il Div e quando non viene controllato, il Div si nasconderà. In questo manuale, abbiamo descritto il metodo per nascondere e mostrare Div usando la proprietà di transizione.