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:none
das 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;
}
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.Es gibt bereits einige Antworten, aber hier ist meine Lösung:
Ich benutze
opacity: 0
undvisibility: hidden
. Um sicherzustellen, dass diesvisibility
vor 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
hidden
zu Ihrem Element hinzufügen , wird sie ausgeblendet.quelle
.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 !!display: none
ist nicht möglich.pointer-events: none;
. Dies deaktiviert jegliche Interaktion mit dem Mauszeiger.visibility: hidden
Pass auf, das brauchst du nichtpointer-events: none;
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
display
Wert 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.quelle
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
,margin
undborder
auf 0, oder einfachpadding-top
,padding-bottom
,margin-top
undmargin-bottom
.Ich habe die Demo von Duopixel hier aktualisiert: http://jsfiddle.net/qD5XX/231/
quelle
Im Folgenden können Sie ein Element animieren, wenn
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"); }
quelle
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, anstattdisplay: none;
:.section { overflow: hidden; transition: transform 0.3s ease-out; height: auto; transform: scaleY(1); transform-origin: top; &.hidden { transform: scaleY(0); } }
quelle
Hier ist meine Lösung für das gleiche Problem.
Außerdem habe ich
onclick
im 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
div
1 Pixel mit a hoch zu haltenscale(0.001)
und sie zu zoomen, wenn ich sie brauche. Wenn Ihnen der Zoomeffekt nicht gefällt, können Sie ihnopacity
nach 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.
quelle