Maison > interface Web > tutoriel CSS > le corps du texte

Comment animer un élément caché en CSS ?

DDD
Libérer: 2024-11-14 09:39:01
original
316 Les gens l'ont consulté

How to Animate a Hidden Element in CSS?

Animation et affichage CSS : aucun

En CSS, animer des éléments masqués (par exemple, affichage : aucun) n'est pas simple. Lors de la définition de display: none supprime un élément du flux de documents, il occupe toujours de l'espace. Pour résoudre ce problème :

1. Définir une hauteur fixe :

Puisque vous ne pouvez pas animer entre display: none et display: block, fixez la hauteur initiale de l'élément masqué à la hauteur qu'il occupera une fois révélé.

CSS :

#main-div {
  height: 0;
  display: block;
  overflow: hidden;
  animation-delay: 3.5s;
}
Copier après la connexion

2. Utiliser une image clé d'animation :

Définissez une image clé d'animation qui fait passer l'élément d'une hauteur de 0 à la hauteur souhaitée.

CSS :

@keyframes main-div-slide {
  from {
    height: 0;
  }
  to {
    height: 375px;
  }
}
Copier après la connexion

3. Appliquer l'animation :

Associez l'image clé de l'animation à l'élément caché.

CSS :

#main-div {
  animation: main-div-slide 1s ease 3.5s forwards;
}
Copier après la connexion

Maintenant, l'élément caché glissera de manière transparente vers le bas sans affecter la disposition des autres éléments sur le page.

Remarque : Cette approche fonctionne si vous avez une hauteur fixe pour l'élément caché. Pour les hauteurs dynamiques, vous devrez peut-être utiliser jQuery ou JavaScript.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal