Comment afficher et cacher une div avec transition dans CSS

Le but principal des divs est de diviser une page en différentes sections et de les style en conséquence. En comparaison, le style d'une div est relativement simple en raison de ses identifiants et des attributs. De plus, afficher et cacher les divs fait également partie du style.

Dans ce manuel, nous apprendrons la procédure pour afficher et cacher la div avec le «transition»Propriété de CSS.

Comment afficher et cacher une div avec transition dans CSS?

Le CSS "transition«La propriété facilite la modification de la valeur de la propriété en fonction d'une période spécifique. Il peut s'agir d'un élément flottant ou actif, selon son état. De plus, la propriété de transition de CSS est utilisée pour afficher et masquer la div dans HTML.

Maintenant, passons à la syntaxe de la propriété de transition.

Syntaxe

Il y a deux choses que vous devez spécifier lors de la création d'un effet de transition:

• Ajouter un effet à une propriété CSS.
• Définir la durée de l'effet.

Essentiellement, "transition»Est une propriété scolare composée de quatre autres propriétés, qui sont données ci-dessous:

transition: durée de transition de la transition de transition
transition de transition de transition

Voici la description des propriétés mentionnées:

• Property de transition: Il est utilisé pour définir la transition vers n'importe quelle propriété CSS. Comme la largeur, la hauteur, l'opacité et bien d'autres.
• Durée de transition: Il est utilisé pour spécifier la durée de la transition.
• Fonction de transition: Il est utilisé pour définir la vitesse de la transition.
• Relay de transition: Il spécifie le moment où la transition commence ou retarde.

Prenons un exemple dans lequel nous allons montrer et masquer la div avec le «transition»Propriété de CSS. À cette fin, nous créons d'abord un «div"Et un type d'entrée"cocher".

Étape 1: Créer et style Div

Dans la balise, nous ajouterons une étiquette à l'aide de la balise et ajouterons un type d'entrée comme «cocher". Après cela, créez une div et fermez la balise.

Html

Montrez le div
Div caché

Ci-après, nous allons styliser la div en utilisant la propriété en couleur d'arrière-plan et définir la couleur de l'arrière-plan comme «RVB (238, 190, 118)". Nous allons définir la hauteur de la div comme «150px«Et ajustez la bordure autour de lui comme«10px","crête", et "RVB (6, 56, 2)". En fin de compte, nous spécifierons la taille de la police comme «50px".

CSS

div
Color en arrière-plan: RVB (238, 190, 118);
hauteur: 150px;
Border: 10px Ridge RVB (6, 56, 2);
taille de police: 50px;

La sortie du code décrit ci-dessus est donnée ci-dessous. Ici, vous pouvez voir que la div et la case sont créées avec succès:

Maintenant, passez à l'étape suivante dans laquelle nous cachons et affichons la div à l'aide de la propriété de transition.

Étape 2: Afficher et masquer une div avec transition

Pour ce faire, nous définirons l'effet de transition en définissant «opacité», Sa durée comme«2s», Et la valeur de l'opacité comme«0«Dans la classe Div que nous avons créé dans le CSS:

transition: opacité 2S;
Opacité: 0;

Note: Nous appliquerons la transition sur "opacité»Propriété pour définir la transparence de l'élément. Ici, nous spécifierons sa valeur comme «0», Ce qui signifie que lorsque la transition commence, la div sera cachée pendant deux secondes.

Après avoir réglé les valeurs de transition, nous utiliserons "saisir«Pour accéder au type d'entrée créé dans le fichier HTML et définissez la pseudo-classe de l'élément d'entrée comme«:vérifié". Ensuite, nous accéderons au div créé et au ««+»L'opérateur sera utilisé pour associer la case à cocher avec le div. Ainsi, lorsqu'une opération est effectuée sur la case à cocher, son utilisation affectera le div. Ensuite, nous définirons la valeur d'opacité comme «1»:

Entrée: vérifié + div
Opacité: 1

Note: Nous spécifierons la valeur d'opacité comme «1», Ce qui signifie que lorsque la case à cocher est marquée, le div créé sera affiché. De plus, ne le marquez pas pour cacher le div

Comme vous pouvez le voir, le div est montré et caché en utilisant le «transition»Propriété et«:vérifié”Élément pseudo-classe:

Nous avons expliqué la méthode pour cacher et afficher un div avec une propriété de transition dans CSS.

Conclusion

Pour afficher et cacher une div, le «transition»Propriété et«:vérifié«L'élément pseudo-classe est utilisé de telle manière que la valeur de la div opacité est définie comme«0», Et dans: élément pseudo-classe vérifié, définissez l'opacité comme«1". Lorsque l'utilisateur clique sur la case à cocher, le div s'affiche et lorsqu'il deviendra incontrôlé, le div se cachera. Dans ce manuel, nous avons décrit la méthode pour cacher et afficher Div en utilisant la propriété de transition.