Animation et affichage CSS Aucun

Question

J'ai une animation CSS pour une div qui se glisse après un certain temps. Ce que je voudrais, c'est que quelques divs remplissent l'espace de la div animée qui se glisse à l'intérieur, ce qui poussera ensuite ces éléments vers le bas de la page.

Lorsque j'essaie de le faire, la première division qui se glisse à l'intérieur occupe toujours de l'espace, même si elle n'est pas visible. Si je change la div en display:none le div ne se glisse pas du tout.

Comment faire pour qu'un div n'occupe pas d'espace tant qu'il n'est pas programmé pour entrer (en utilisant le CSS pour la programmation) ?

J'utilise Animate.css pour les animations.

Voici à quoi ressemble le code :

<div id="main-div" class="animated fadeInDownBig"><!-- Content --></div>

<div id="div1"><!-- Content --></div>
<div id="div2"><!-- Content --></div>
<div id="div3"><!-- Content --></div>

Comme le montre le code, je voudrais que la div principale soit cachée et que les autres div s'affichent d'abord. Ensuite, j'ai défini le délai suivant :

#main-div{
   -moz-animation-delay: 3.5s;
   -webkit-animation-delay: 3.5s;
   -o-animation-delay: 3.5s;
    animation-delay: 3.5s;
}

C'est à ce moment-là que je voudrais que la division principale pousse les autres divisions vers le bas au fur et à mesure qu'elle arrive.

Comment dois-je m'y prendre ?

Note : J'ai envisagé d'utiliser jQuery pour faire cela, mais je préfère utiliser strictement CSS car c'est plus lisse et le timing est un peu mieux contrôlé.

EDIT

J'ai essayé ce que Duopixel a suggéré, mais soit j'ai mal compris et je ne fais pas les choses correctement, soit cela ne fonctionne pas. Voici le code :

HTML

<div id="main-div" class="animated fadeInDownBig"><!-- Content --></div>

CSS

#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;
}
#main-image.fadeInDownBig{
    height: 375px;
}

Answer 1

CSS (ou jQuery, d'ailleurs) ne peut pas animer entre display: none; y display: block; . Pire encore : il ne peut pas s'animer entre height: 0 y height: auto . Vous devez donc coder la hauteur en dur (si vous ne pouvez pas coder les valeurs en dur, vous devez utiliser le javascript, mais c'est une toute autre question) ;

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

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

Vous mentionnez que vous utilisez Animate.css, avec lequel je ne suis pas familier, donc il s'agit d'un CSS vanille.

Vous pouvez voir une démo ici : http://jsfiddle.net/duopixel/qD5XX/

Answer 2

Il y a déjà quelques réponses, mais voici ma solution :

J'utilise opacity: 0 y visibility: hidden . Pour s'assurer que visibility est défini avant l'animation, nous devons définir les bons délais.

J'utilise http://lesshat.com pour simplifier la démo, pour une utilisation sans cela il suffit d'ajouter les préfixes du navigateur.

(par exemple -webkit-transition-duration: 0, 200ms; )

.fadeInOut {
    .transition-duration(0, 200ms);
    .transition-property(visibility, opacity);
    .transition-delay(0);

    &.hidden {
        visibility: hidden;
        .opacity(0);
        .transition-duration(200ms, 0);
        .transition-property(opacity, visibility);
        .transition-delay(0, 200ms);
    }
}

Donc dès que vous ajoutez la classe hidden à votre élément, il s'effacera.

Answer 3

J'ai eu le même problème, parce que dès que display: x; est en animation, il ne s'animera pas.

J'ai fini par créer des images clés personnalisées, en changeant d'abord le paramètre display puis les autres valeurs. Cela peut donner une meilleure solution.

Ou, au lieu d'utiliser display: none; utiliser position: absolute; visibility: hidden; Cela devrait fonctionner.

Answer 4

Vous pouvez obtenir une implémentation purement CSS avec max-height

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

@keyframes slide {
  from {max-height: 0;}
  to {max-height: 500px;}
}

Vous devrez peut-être aussi définir padding , margin y border à 0, ou simplement padding-top , padding-bottom , margin-top y margin-bottom .

J'ai mis à jour la démo de Duopixel ici : http://jsfiddle.net/qD5XX/231/

Answer 5

Ce qui suit vous permettra d'animer un élément lorsque

1. Donner un affichage - Aucun
2. Donner un affichage - Bloc

CSS

.MyClass {
       opacity: 0;
       display:none;
       transition: opacity 0.5s linear;
       -webkit-transition: opacity 0.5s linear;
       -moz-transition: opacity 0.5s linear;
       -o-transition: opacity 0.5s linear;
       -ms-transition: opacity 0.5s linear;
 }

JavaScript

function GetThisHidden(){
    $(".MyClass").css("opacity", "0").on('transitionend webkitTransitionEnd oTransitionEnd otransitionend', HideTheElementAfterAnimation);
}

function GetThisDisplayed(){
    $(".MyClass").css("display", "block").css("opacity", "1").unbind("transitionend webkitTransitionEnd oTransitionEnd otransitionend");
}

function HideTheElementAfterAnimation(){
    $(".MyClass").css("display", "none");
}