CSS-Animation und -Anzeige Keine

79

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

Antworten:

76

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/

Methode der Aktion
quelle
Danke für die Hilfe, es funktioniert nicht oder ich habe es nicht richtig. Siehe meine Bearbeitung meiner Frage.
L84
Entschuldigung, ich habe über CSS-Übergänge nachgedacht, als ich das geschrieben habe (es ist übrigens viel einfacher), ich habe den Code für die Animationssyntax aktualisiert
methodofaction
Wunderschönen! Klappt wunderbar. Vielen Dank! Sie sollten sich Animate.css ansehen, ein sehr sehr nützliches Tool für Animationen.
L84
Ich kann die Höhe nicht hart codieren. Was wäre der beste Weg, dies mit Javascript zu tun?
Raphael Isidro
4
if you can't hard code the values then you need to use javascript. Das ist falsch. Sie können die Eigenschaft max-height mit einem Wert animieren, der größer ist als erwartet, und der funktioniert einwandfrei.
ssc-hrep3
30

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.

Fabian Vogelsteller
quelle
7
BEEINDRUCKEND! Ich habe folgendes verwendet: .default { opacity: 0; visibility: hidden; top: -10px; transition-duration: 200ms, 200ms, 0; transition-property: opacity, top, visibility; transition-delay: 0, 0, 200ms; } - .hidden { opacity: 1; visibility: visible; top: 0px; transition-duration: 200ms, 200ms, 0; transition-property: opacity, top, visibility; transition-delay: 200ms, 200ms, 0; } um einen "Drop" -Effekt zu erzeugen, hat wirklich gut funktioniert! liebe es @frozeman, danke !!
simey.me
3
Okay, Sie haben das Element ausgeblendet, aber wie in der akzeptierten Antwort angegeben, haben Sie nicht von der Anzeige animiert: keine; und Anzeige: Block; Ihr Element nimmt also immer noch Platz auf der Seite ein
svnm
2
Animation display: noneist nicht möglich.
Fabian Vogelsteller
Wenn Sie ein Element mit Deckkraft oder Sichtbarkeit ausblenden, ist es immer noch vorhanden. Wenn Sie beispielsweise Links darin haben, können diese weiterhin angeklickt werden. Um dies zu vermeiden, können Sie verwenden pointer-events: none;. Dies deaktiviert jegliche Interaktion mit dem Mauszeiger.
pol_databender
6
visibility: hiddenPass auf, das brauchst du nichtpointer-events: none;
Edu Ruiz
16

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.

tobspr
quelle
11

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/

Oliverpool
quelle
5

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

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);
  }
}
Jesper N.
quelle
1
Ja, aber das lässt den leeren Raum!
Hafiz Temuri
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.

Marco Bernardini
quelle