Comment puis-je animer un Div avec « display : none » en CSS ?

Animation et affichage CSS Aucun

Lorsque vous essayez d'animer un div à l'aide de CSS, il est important de comprendre les limites de la propriété d'affichage. Alors que l'affichage : aucun ; La propriété peut masquer un élément de la vue, elle ne le supprime pas du flux de documents. Cela peut entraîner des problèmes lors de l'animation d'éléments qui occupent de l'espace sur la page.

Pour obtenir l'effet souhaité, vous ne pouvez pas changer le div principal directement depuis display : none ; pour afficher : bloquer ;. Au lieu de cela, vous devrez définir la hauteur du div principal sur 0 et utiliser overflow: Hidden; pour le cacher dans un premier temps. Ensuite, lorsqu'il est temps pour le div principal de glisser, vous pouvez animer la hauteur du div à la valeur souhaitée.

Voici un exemple :

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

#main-div.fadeInDownBig {
    height: 375px;
}

Cela fera glisser le div principal après 3,5 secondes, poussant les autres div vers le bas de la page lorsqu'il entre dans la fenêtre d'affichage.

Notez que cette technique fonctionne également avec d'autres attributs, comme l'opacité. Par exemple, vous pouvez fondre un div en augmentant progressivement son opacité de 0 à 1.

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!