Dans ce manuel, nous apprendrons la procédure pour afficher et masquer la div avec le ' transition ” propriété de CSS.
Comment afficher et masquer un div avec transition en CSS ?
Le SSC ' transition ” propriété permet de modifier facilement 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 le div en HTML.
Passons maintenant à 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 :
Fondamentalement, ' transition ” est une propriété abrégée composée de quatre autres propriétés, qui sont données ci-dessous :
transition : transition-propriété transition-duréetransition-temporisation-fonction transition-retard
Voici la description des propriétés mentionnées :
- propriété 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.
- transition-durée : Il est utilisé pour spécifier la durée de la transition.
- fonction de temporisation de transition : Il est utilisé pour régler la vitesse de la transition.
- délai de transition : Il spécifie l'heure à laquelle la transition démarre ou retarde.
Prenons un exemple dans lequel nous allons afficher et masquer la div avec le ' transition ” propriété de CSS. A cet effet, dans un premier temps, nous créons un « div ' et un type d'entrée ' case à cocher ”.
Étape 1 : Créer et styliser la division
Dans la balise
HTML
<étiquette > Afficher la div >
>
Ci-après, nous allons styliser le div en utilisant la propriété background-color 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 comme ' 10 pixels ”, “ crête ', et ' RVB(6, 56, 2) ”. À la fin, nous spécifierons la taille de la police comme ' 50px ”.
CSS
div {Couleur de l'arrière plan : RVB ( 238 , 190 , 118 ) ;
la taille : 150px ;
frontière : 10 pixels crête RVB ( 6 , 56 , deux ) ;
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 à cocher sont créées avec succès :
Maintenant, passez à l'étape suivante dans laquelle nous masquons et affichons le div à l'aide de la propriété de transition.
Étape 2 : Afficher et masquer un div avec transition
Pour ce faire, nous allons définir 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éée dans le CSS :
transition : opacité 2s ;opacité : 0 ;
Noter: Nous appliquerons la transition sur ' opacité ” pour définir la transparence de l'élément. Ici, nous spécifierons sa valeur comme ' 0 ”, ce qui signifie que lorsque la transition démarre, la div sera masquée pendant deux secondes.
Après avoir défini les valeurs de transition, nous utiliserons ' saisir ' pour accéder au type d'entrée créé dans le fichier HTML et définir 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 à la div. Ainsi, lorsqu'une opération est effectuée sur la case à cocher, son utilisation affectera la div. Ensuite, nous allons définir la valeur d'opacité sur ' 1 ” :
saisir : vérifié + div {opacité : 1
}
Noter: Nous spécifierons la valeur d'opacité comme ' 1 ”, ce qui signifie que lorsque la case est cochée, la div créée sera affichée. De plus, décochez-le pour masquer la div
Comme vous pouvez le voir, la div est affichée et masquée à l'aide du ' transition « propriété et » :vérifié ” élément de pseudo-classe :
Nous avons expliqué la méthode pour masquer et afficher un div avec la propriété de transition en CSS.
Conclusion
Pour afficher et masquer une div, le ' transition « propriété et » :vérifié ' L'élément de pseudo-classe est utilisé de telle manière que la valeur de l'opacité div est définie sur ' 0 ', et dans l'élément de pseudo-classe :checked, définissez l'opacité sur ' 1 ”. Lorsque l'utilisateur clique sur la case à cocher, la div s'affiche, et lorsqu'elle est décochée, la div se cache. Dans ce manuel, nous avons décrit la méthode pour masquer et afficher div en utilisant la propriété transition.