CSS3 Animation et affichage Aucun

J’ai une animation CSS 3 pour un div qui entre 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, ce qui poussera ensuite ces éléments en bas de la page.

Lorsque j’essaie de le faire, la première division qui se glisse prend de la place même si elle n’est pas visible. Si je change le div pour display:none le div ne glisse pas du tout.

Comment puis-je avoir un div ne prend pas de place jusqu’à ce qu’il soit programmé pour entrer (en utilisant CSS pour le timing)

J’utilise Animate.css pour les animations.

Voici à quoi ressemble le code:

 

Comme le montre le code, je voudrais que le div principal soit caché et que les autres divs soient visibles d’abord. J’ai ensuite 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 le div principal fasse tomber les autres divisions à mesure qu’il intervient.

Comment puis-je faire cela?

Note: j’ai envisagé d’utiliser jQuery pour cela, mais je préfère utiliser ssortingctement les CSS car elles sont plus fluides et que le timing est un peu mieux contrôlé.

MODIFIER

J’ai essayé ce que suggérait Duopixel, mais soit j’ai mal compris et je ne le fais pas correctement ou cela ne fonctionne pas. Voici le code:

HTML

 

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; } 

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 . Donc, vous devez coder la hauteur en dur (si vous ne pouvez pas coder en dur les valeurs, vous devez utiliser javascript, mais c’est une question entièrement 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 mentionnez que vous utilisez Animate.css, que je ne connais pas bien, il s’agit donc d’un CSS vanille.

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

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

J’utilise l’ opacity: 0 et la visibility: hidden . Pour vous assurer que la visibility est définie avant l’animation, nous devons définir les bons délais.

J’utilise http://lesshat.com pour simplifier la démo, pour l’utiliser sans cela, il suffit d’append les préfixes du navigateur.

(ex: -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, celle-ci va disparaître.

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

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

Ou, au lieu d’utiliser display: none; position: absolute; visibility: hidden; utilisation position: absolute; visibility: hidden; position: absolute; visibility: hidden; Ça devrait marcher.

Vous pouvez réussir à avoir 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;} } 

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

[comme je n’ai pas assez de réputation pour commenter sa réponse]

Ce qui suit vous fera animer un élément quand

  1. Lui donner un affichage – Aucun
  2. Donner un affichage – Bloquer

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"); } 

Comment puis-je avoir un div ne prend pas de place jusqu’à ce qu’il soit programmé pour entrer (en utilisant CSS pour le timing)

Voici ma solution au même problème.

De plus, je onclick sur la dernière image pour charger un autre diaporama, et il ne doit pas être cliquable tant que la dernière image n’est pas visible.

Fondamentalement, ma solution est de garder le div 1 pixel de haut en utilisant une scale(0.001) , en le zoomant quand j’en ai besoin. Si vous n’aimez pas l’effet de zoom, vous pouvez restaurer l’ opacity à 1 après avoir zoomé 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 pour les octets. S’il vous plaît ne pas tenir compte du codage impair, il est fait par un script php sélectionnant les valeurs d’un tableau et str_replacing d’un template: je suis trop fainéant pour tout retaper pour chaque préfixe propriétaire d’un diaporama de plus de 100 divs.

Lors de l’animation de la hauteur (de 0 à auto), en utilisant transform: scaleY(0); est une autre approche utile pour masquer l’élément, au lieu de l’ display: none; :

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