Les animations CSS peuvent-elles fonctionner avec des éléments définis sur « display : none » ?

Animation CSS et affichage des éléments

Vous avez tenté d'utiliser une animation CSS avec un élément qui a initialement display: none. Bien que cela puisse sembler une approche simple pour afficher et masquer des éléments de manière dynamique, les limitations CSS l'empêchent.

Le problème avec l'affichage : aucun

Les animations CSS ne peuvent pas gérer les transitions entre affichage : aucun et affichage : bloc ou entre hauteur : 0 et hauteur : auto. Vous devez coder en dur la hauteur si possible, sinon l'utilisation de JavaScript serait nécessaire.

Réglage de la hauteur

Dans les situations où le codage en dur de la hauteur n'est pas réalisable, vous pouvez utiliser le débordement : caché pour masquer l'élément et définir sa hauteur sur 0. Lorsque vous êtes prêt à l'afficher, remettez le débordement sur visible et animez la hauteur au maximum mesure.

Exemple de code

CSS :

#main-image {
  height: 0;
  overflow: hidden;
  background: red;
  animation: slide 1s ease 3.5s forwards;
}

@keyframes slide {
  from { height: 0; }
  to { height: 300px; }
}

HTML :

<div>

Dans cet exemple, débordement : Hidden garantit que l'élément reste caché car sa hauteur est animée de 0 à 300px.

Remarque : L'exemple CSS utilise le CSS Vanilla. Si vous utilisez Animate.css, vous pouvez remplacer la règle @keyframes par la classe Animate.css correspondante.

Cette approche vous permet d'animer des éléments en douceur sans compter sur display : none ou jQuery, offrant des transitions plus fluides. et un contrôle du timing plus précis.

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!