web-dev-qa-db-fra.com

Animation et affichage CSS Aucun

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, dans laquelle il placera ensuite ces éléments en bas de la page.

Lorsque j'essaie au début, cette diapositive prend encore de la place, même si elle n'est pas visible. Si je change le div en display:none le div ne glisse pas du tout.

Comment puis-je un div ne prend pas d'espace jusqu'à ce qu'il soit chronométré pour entrer (en utilisant CSS pour le chronométrage.)

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 code l'indique, j'aimerais que la division principale soit masquée et que les autres divisions s'affichent en premier. Ensuite, j'ai 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 à mesure qu’elle entre en jeu.

Comment puis-je faire cela?

Remarque: jQuery a été envisagé pour ce faire. Toutefois, je préfère utiliser strictement les CSS, qui sont plus fluides et dont le timing est un peu mieux contrôlé.

EDIT

J'ai essayé ce que Duopixel avait suggéré mais soit j'ai mal compris et je ne le fais pas 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;
}
csscss-transitionsanimate.css
61
L84

CSS (ou jQuery, d'ailleurs) ne peut pas animer entre display: none; et display: block;. Pire encore: il ne peut pas animer entre height: 0 et height: auto. Vous devez donc coder en dur la hauteur (si vous ne pouvez pas coder en dur les valeurs, vous devez utiliser javascript, mais la question est tout à fait différente);

#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 dites que vous utilisez Animate.css, ce que je ne connais pas bien, il s'agit donc d'un fichier CSS Vanilla.

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

62
methodofaction

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

J'utilise opacity: 0 et visibility: hidden. Pour vous 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émonstration, pour une utilisation sans ajouter simplement 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);
    }
}

Ainsi, dès que vous ajoutez la classe hidden à votre élément, elle disparaîtra.

23
Fabian Vogelsteller

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

J'ai fini par créer des images clés personnalisées, en modifiant d'abord la valeur display, puis les autres valeurs. Peut donner une meilleure solution.

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

13
tobspr

Vous pouvez gérer une implémentation CSS pure 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 également définir padding, margin et border sur 0, ou simplement padding-top, padding-bottom, margin-top et margin-bottom.

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

8
oliverpool

Ce qui suit vous amènera à 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");
}
6
Mahesh

Lors de l'animation de la hauteur (de 0 à automatique), l'utilisation de transform: scaleY(0); constitue une autre approche utile pour masquer l'élément au lieu de display: none;:

.section {
  overflow: hidden;
  transition: transform 0.3s ease-out;
  height: auto;
  transform: scaleY(1);
  transform-Origin: top;

  &.hidden {
    transform: scaleY(0);
  }
}
1
Jesper Lehtinen

Comment puis-je un div ne prend pas d'espace jusqu'à ce qu'il soit chronométré pour entrer (en utilisant CSS pour le chronométrage.)

Voici ma solution au même problème.

De plus, j'ai un onclick sur la dernière image en chargeant un autre diaporama, et il ne doit pas être cliquable avant que la dernière image ne soit visible.

Ma solution consiste essentiellement à maintenir le div 1 pixel à l'aide d'un scale(0.001), en effectuant un zoom lorsque j'en ai besoin. Si vous n'aimez pas l'effet de zoom, vous pouvez restaurer le opacity sur 1 après le zoom de la diapositive.

#Slide_TheEnd {

    -webkit-animation-delay: 240s;
    animation-delay: 240s;

    -moz-animation-timing-function: linear;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;

    -moz-animation-duration: 20s;
    -webkit-animation-duration: 20s;
    animation-duration: 20s;

    -moz-animation-name: Slide_TheEnd;
    -webkit-animation-name: Slide_TheEnd;
    animation-name: Slide_TheEnd;

    -moz-animation-iteration-count: 1;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;

    -moz-animation-direction: normal;
    -webkit-animation-direction: normal;
    animation-direction: normal;

    -moz-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;

    transform: scale(0.001);
    background: #cf0;
    text-align: center;
    font-size: 10vh;
    opacity: 0;
}

@-moz-keyframes Slide_TheEnd {
    0% { opacity: 0;  transform: scale(0.001); }
    10% { opacity: 1; transform: scale(1); }
    95% { opacity: 1; transform: scale(1); }
    100% { opacity: 0;  transform: scale(0.001); }
}

Les autres images clés sont supprimées à des fins d'octets. Ne tenez pas compte du code étrange, il est créé par un script php qui sélectionne les valeurs d’un tableau et str_replacing un modèle: je suis trop paresseux pour tout saisir à nouveau pour chaque préfixe propriétaire dans un diaporama de plus de 100 divs.

0
Marco Bernardini