Comment créer une animation coulissante en CSS lorsque l'élément animé a « display : none ; » ?

Animation CSS en conjonction avec l'affichage : Aucune

Vous souhaitez créer une animation CSS dans laquelle un "main-div" se glisse après un durée spécifiée, poussant vers le bas les autres divs sur son chemin. Cependant, définir la propriété "display" sur "none" pour le "main-div" empêche le déclenchement de l'animation.

Pour surmonter cette limitation, vous ne pouvez pas animer directement entre "display: none;" et "affichage : bloc ;" ou entre « hauteur : 0 ; » et "hauteur : auto". Au lieu de cela, vous devez spécifier manuellement la hauteur du div.

Voici un exemple utilisant le CSS vanilla :

#main-image {
    height: 0;
    overflow: hidden;
   -moz-animation-delay: 3.5s;
   -webkit-animation-delay: 3.5s;
   -o-animation-delay: 3.5s;
    animation-delay: 3.5s;
}

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

Dans ce code, nous définissons explicitement la hauteur de "l'image principale" div à 0 pixel initialement, le masquant efficacement. Le "débordement : caché ;" La propriété empêche tout contenu de dépasser la hauteur spécifiée.

Ensuite, nous utilisons des animations CSS pour passer en douceur de la hauteur initiale de 0 à la hauteur souhaitée de 300 px. La propriété "animation-delay" garantit que l'animation démarre après un délai de 3,5 secondes.

En utilisant cette approche, vous pouvez créer une animation coulissante sans utiliser "display: none;" tout en conservant la transition fluide et le timing précis fourni par CSS.

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!