2012-10-23 24 views
36

Possiedo un'animazione CSS 3 per un div che scorre dopo un determinato intervallo di tempo. Quello che vorrei è che per alcuni divichi riempia lo spazio del div animato in cui scorre, che poi spingerà quegli elementi lungo la pagina.CSS3 Animazione e visualizzazione Nessuno

Quando provo questo al primo div che fa scorrere ancora occupa spazio anche quando non è visibile. Se cambio il div a display:none il div non entra affatto.

Come ho un div non occupare spazio fino a quando non è a tempo di venire a (utilizzando i CSS per la tempistica.)

Sto usando Animate.css per le animazioni.

Ecco ciò che il codice è simile:

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

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

Come il codice mostra Vorrei che il div principale per essere nascosto e gli altri div mostrano in un primo momento. Poi ho il seguente ritardo impostato:

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

E 'a quel punto che vorrei il div principale per spingere gli altri div verso il basso come si tratta in

Come faccio a fare questo.?

Nota: ho preso in considerazione l'utilizzo di jQuery per farlo, tuttavia preferisco utilizzare rigorosamente CSS poiché è più fluido e il tempo è un po 'meglio controllato.

EDIT

ho cercato quello Duopixel suggerito ma o io mis-capito e non sto facendo questo correttamente o non funziona. Ecco il codice:

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

risposta

41

Il CSS (o jQuery, per quella materia) non può animare tra display: none; e display: block;. Peggio ancora: non è possibile animare tra height: 0 e height: auto. Quindi è necessario codificare l'altezza (se non è possibile codificare i valori, è necessario utilizzare javascript, ma questa è una domanda completamente diversa);

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

si parla che si sta utilizzando Animate.css, che io non sono a conoscenza, quindi questo è un CSS vaniglia.

Potete vedere una demo qui: http://jsfiddle.net/duopixel/qD5XX/

+0

Grazie per l'aiuto, non funziona o io non ce l'ho corretta. Vedi la mia modifica alla mia domanda. – L84

+0

Scusa, stavo pensando alle transizioni CSS quando l'ho scritto (è molto più semplice tra l'altro), ho aggiornato il codice per la sintassi di animazione – Duopixel

+0

Beautiful! Funziona come un fascino. Grazie! Dovresti controllare [Animate.css] (http://daneden.me/animate/) uno strumento molto utile per le animazioni. – L84

9

Ho avuto lo stesso problema, perché non appena display: x; è in animazione, ha vinto si animano.

Ho finito con la creazione di fotogrammi chiave personalizzati, modificando prima il valore display quindi gli altri valori. Può dare una soluzione migliore.

Oppure, invece di utilizzare display: none; utilizzare position: absolute; visibility: hidden; Dovrebbe funzionare.

17

Ci sono alcune risposte già, ma qui è la mia soluzione:

Io uso opacity: 0 e visibility: hidden. Per assicurarti che visibility sia impostato prima dell'animazione, dobbiamo impostare i ritardi corretti.

Io uso http://lesshat.com per semplificare la demo, per l'uso senza questo basta aggiungere i prefissi del browser.

(ad esempio -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); 
    } 
} 

Così, non appena si aggiunge la classe hidden al vostro elemento, esso svanirà.

+2

WOW! Ho usato questo come: '.default { opacità: 0; visibilità: nascosta; inizio: -10px; durata transizione: 200 ms, 200 ms, 0; transizione-proprietà: opacità, superiore, visibilità; ritardo di transizione: 0, 0, 200 ms; } ' -' .hidden { opacità: 1; visibilità: visibile; inizio: 0px; durata transizione: 200 ms, 200 ms, 0; transizione-proprietà: opacità, superiore, visibilità; ritardo di transizione: 200 ms, 200 ms, 0; } per creare un effetto "drop", ha funzionato davvero bene! lo adoro @frozeman, grazie !! –

+1

okay hai nascosto l'elemento, ma come dice la risposta accettata, non hai animato da display: nessuno; e visualizza: blocco; quindi il tuo elemento sta ancora occupando spazio nella pagina –

+0

animando 'display: none' non è possibile. –

4

Di seguito si arriva per animare un elemento quando

  1. Dare un display - Nessuno
  2. Dare un display - Blocco

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

È possibile riuscire ad avere un'implementazione CSS puro con 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;} 
} 

Ho aggiornato la demo di Duopixel qui: http://jsfiddle.net/qD5XX/231/

[come io non ho abbastanza reputazione da commenta la sua risposta]

0

Come faccio a non div prendere spazio fino al momento in cui entri (usando CSS per i tempi.)

Ecco la mia soluzione allo stesso problema.

Inoltre ho un onclick sull'ultimo frame che carica un'altra presentazione e non deve essere selezionabile finché non è visibile l'ultimo frame.

Fondamentalmente la mia soluzione è di mantenere il div alto 1 pixel utilizzando uno scale(0.001), ingrandendolo quando ne ho bisogno. Se non ti piace l'effetto zoom, puoi ripristinare opacity su 1 dopo averlo ingrandito.

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

Altri fotogrammi chiave vengono rimossi per motivi di byte. Si prega di ignorare la codifica dispari, è fatta da uno script php che seleziona i valori da un array e str_replacing un modello: Sono troppo pigro per ridigitare tutto per ogni prefisso proprietario su uno slideshow di oltre 100 div.

0

Durante l'animazione altezza (da 0 a Auto), utilizzando transform: scaleY(0); è un altro approccio utile per nascondere l'elemento, invece di display: none;:

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

    &.hidden { 
    transform: scaleY(0); 
    } 
} 
Problemi correlati