CSS-Animation und -Anzeige Keine

Ich habe eine CSS-Animation für ein Div, das nach einer festgelegten Zeitspanne eingeblendet wird. Was ich möchte, ist, dass ein paar Divs den Raum des animierten Divs füllen, der hineingleitet, und diese Elemente dann auf der Seite nach unten schieben.

Wenn ich dies zuerst versuche, nimmt div, das hineingleitet, immer noch Platz ein, auch wenn es nicht sichtbar ist. Wenn ich das Div in display:nonedas Div ändere, gleitet es überhaupt nicht hinein.

Wie kann ich dafür sorgen, dass ein Div erst dann Platz beansprucht, wenn der Zeitpunkt für den Eingang festgelegt ist (Verwendung von CSS für das Timing)?

Ich benutze Animate.css für die Animationen.

So sieht der Code 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, möchte ich, dass das Haupt-Div ausgeblendet wird und die anderen Divs zuerst angezeigt werden. Dann habe ich folgende Verzögerung eingestellt:

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

An diesem Punkt möchte ich, dass die Hauptdiv die anderen Divs nach unten drückt, wenn sie hereinkommt.

Wie mache ich das?

Hinweis: Ich habe darüber nachgedacht, jQuery zu verwenden. Ich bevorzuge jedoch die Verwendung von ausschließlich CSS, da es flüssiger ist und das Timing etwas besser gesteuert wird.

BEARBEITEN

Ich habe versucht, was Duopixel vorgeschlagen hat, aber entweder habe ich es falsch verstanden und mache es nicht 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;
}

CSS (oder jQuery) kann nicht zwischen display: none;und animieren display: block;. Schlimmer noch: Es kann nicht zwischen height: 0und animieren height: auto. Sie müssen also die Höhe hart codieren (wenn Sie die Werte nicht hart codieren können, müssen Sie Javascript verwenden, aber dies 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 Animate.css verwenden, mit dem ich nicht vertraut bin. Dies ist also ein Vanille-CSS.

Eine Demo finden Sie hier: http://jsfiddle.net/duopixel/qD5XX/

Es gibt bereits einige Antworten, aber hier ist meine Lösung:

Ich benutze opacity: 0und visibility: hidden. Um sicherzustellen, dass dies visibilityvor der Animation eingestellt wird, müssen wir die richtigen Verzögerungen einstellen.

Ich verwende http://lesshat.com , um die Demo zu vereinfachen. Für die Verwendung ohne diese Demo fügen Sie einfach die Browserpräfixe hinzu.

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

Sobald Sie die Klasse hiddenzu Ihrem Element hinzufügen , wird sie ausgeblendet.

Ich hatte das gleiche Problem, denn sobald display: x;es in der Animation ist, wird es nicht animiert.

Am Ende habe ich benutzerdefinierte Keyframes erstellt und zuerst den displayWert und dann die anderen Werte geändert. Kann eine bessere Lösung geben.

Oder anstatt Verwendung zu display: none;verwenden, position: absolute; visibility: hidden;sollte es funktionieren.

Mit können Sie eine reine CSS-Implementierung erreichen 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;}
}

Sie können auch festlegen müssen padding, marginund borderauf 0, oder einfach padding-top, padding-bottom, margin-topund margin-bottom.

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

Im Folgenden können Sie ein Element animieren, wenn

1. Anzeige geben - Keine
2. Geben Sie ihm einen Anzeigeblock

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

Wenn Sie die Höhe animieren (von 0 bis automatisch), ist die Verwendung transform: scaleY(0);ein weiterer nützlicher Ansatz, um das Element auszublenden, anstatt display: none;:

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

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

Wie kann ich dafür sorgen, dass ein Div erst dann Platz beansprucht, wenn der Zeitpunkt für den Eingang festgelegt ist (Verwendung von CSS für das Timing)?

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

Außerdem habe ich onclickim letzten Frame eine weitere Diashow geladen, die erst angeklickt werden darf, wenn der letzte Frame sichtbar ist.

Grundsätzlich besteht meine Lösung darin, die div1 Pixel mit a hoch zu halten scale(0.001)und sie zu zoomen, wenn ich sie brauche. Wenn Ihnen der Zoomeffekt nicht gefällt, können Sie ihn opacitynach dem Zoomen der Folie auf 1 zurücksetzen.

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

Andere Keyframes werden aus Gründen der Bytes entfernt. Bitte ignorieren Sie die ungerade Codierung. Sie wird von einem PHP-Skript erstellt, das Werte aus einem Array auswählt und eine Vorlage ersetzt: Ich bin zu faul, um alles für jedes proprietäre Präfix in einer Diashow mit mehr als 100 Divs erneut einzugeben.