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 :
1 2 3 4 5 6 |
|
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 :
1 2 3 4 5 6 7 8 |
|
3. Appliquer l'animation :
Associez l'image clé de l'animation à l'élément caché.
CSS :
1 2 3 |
|
Maintenant, l'élément caché glissera de manière transparente vers le bas sans affecter la disposition des autres éléments sur la page.
Remarque : Cette approche fonctionne si vous avez une hauteur fixe pour l'élément masqué. 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!