CSS3 Animation und Anzeige Keine

Ich habe eine CSS-3-Animationen für ein div, dass die Folien nach einer gewissen Zeit. Was ich möchte ist, dass ein paar divs um den Raum zu füllen der animierten div, dass die Folien, die er dann schieben Sie diese Elemente auf der Seite nach unten.

Wenn ich versuche diese auf den ersten div, dass die Folien in noch nimmt Platz, auch wenn es nicht sichtbar ist. Wenn ich den div - display:none die div nicht schieben Sie in überhaupt.

Wie kann ich ein div-Element keinen Platz, bis es Zeit zum kommen (mit CSS für das timing.)

Bin ich mit dem Animieren.css für die Animationen.

Hier ist, was der code sieht wie folgt aus:

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

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

Wie der code zeigt, würde ich gerne die Haupt-div ausgeblendet und die anderen divs show im ersten. Dann habe ich die folgenden delay einstellen:

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

Dies ist der Punkt, dass ich gerne das main-div, schieben die anderen divs nach unten, wie es kommt in.

Wie mache ich das?

Hinweis: ich habe gedacht, der Verwendung von jQuery dies zu tun, aber ich bevorzuge mit streng CSS, wie es ist glatter und das timing ist ein bisschen besser kontrolliert.

BEARBEITEN

Habe ich versucht, was Duopixel vorgeschlagen, aber entweder habe ich falsch verstanden und bin nicht so richtig oder es funktioniert nicht. Hier ist der 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;
}

InformationsquelleAutor der Frage L84 | 2012-10-23

47

CSS (oder jQuery, die, für diese Angelegenheit) kann nicht animieren zwischen display: none; und display: block;. Schlimmer noch: es kann nicht animieren zwischen height: 0 und height: auto. So müssen Sie hart code die Höhe (wenn du es nicht codieren Sie die Werte, dann müssen Sie, javascript zu verwenden, aber das ist eine ganz andere Frage);
```
#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;}
}
```
Sie erwähnen, dass Sie Animieren.css, die ich bin nicht vertraut mit, so ist dies ein Vanille-CSS.

Sehen Sie eine demo hier: http://jsfiddle.net/duopixel/qD5XX/

InformationsquelleAutor der Antwort Duopixel
20

Gibt es ein paar Antworten schon, aber hier ist meine Lösung:

Benutze ich opacity: 0 und visibility: hidden. Um sicherzustellen, dass visibility vor der animation haben wir, den richtigen Verzögerungen.

Benutze ich http://lesshat.com zur Vereinfachung der demo, für die Nutzung ohne diese fügen Sie einfach die browser-Präfixe.

(z.B. -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);
    }
}
```
Also, sobald Sie fügen Sie die Klasse hidden Ihrem element, es wird ausgeblendet.

InformationsquelleAutor der Antwort Fabian Vogelsteller
10

Ich hatte das gleiche problem, denn sobald display: x; liegt in der animation, ist es nicht animiert.

Landete ich beim erstellen von keyframes, die erste änderung der display Wert dann die anderen Werte. Eventuell eine bessere Lösung.

Oder anstelle von display: none; verwenden position: absolute; visibility: hidden; sollte Es funktionieren.

InformationsquelleAutor der Antwort tobspr

Können Sie verwalten, eine Reine CSS-Implementierung mit 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;}
}

Ich aktualisiert die demo von Duopixel hier : http://jsfiddle.net/qD5XX/231/

[da ich nicht genug Ruf zu Kommentar seine Antwort]

InformationsquelleAutor der Antwort oliverpool

Folgenden erhalten Sie zu animieren ein element, wenn

Gibt es eine Anzeige - Keine
Gibt es einen Display - Block

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

InformationsquelleAutor der Antwort Mahesh

Wie kann ich ein div-Element keinen Platz, bis es Zeit zum kommen (mit CSS für das timing.)

Hier ist meine Lösung für das gleiche problem.

Außerdem habe ich eine onclick auf dem letzten Bild beim laden einer anderen Diashow, und es muss nicht angeklickt werden, bis der Letzte frame sichtbar ist.

Im Grunde meine Lösung zu halten, ist die div 1 pixel hoch mit einem scale(0.001)Zoomen, wenn ich es brauche. Wenn Sie nicht wie die zoom-Effekt können Sie wieder die opacity 1 nach dem Zoomen die Folie.

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

Anderen werden die keyframes entfernt, die für die Willen von bytes. Bitte ignorieren Sie die seltsame Codierung, es wird durch ein php-Skript, Kommissionierung Werte aus einem array und str_replacing eine Vorlage: ich bin zu faul zum Abtippen alles für jedes proprietäre Präfix auf eine 100+ divs Diashow.

InformationsquelleAutor der Antwort Marco Bernardini

Beim animieren Höhe (von 0 auf auto), mit transform: scaleY(0); ist ein weiterer nützlicher Ansatz zu verstecken das element, anstatt display: none;:

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

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

InformationsquelleAutor der Antwort Jesper Lehtinen

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.