Sie können dies so erreichen, wie Sie es erwartet haben - mithilfe der Anzeige -, aber Sie müssen den Browser drosseln, damit es funktioniert, entweder mit Javascript oder wie andere einen ausgefallenen Trick mit einem Tag in einem anderen vorgeschlagen haben. Das innere Tag ist mir egal, da es CSS und Dimensionen weiter verkompliziert. Hier ist die Javascript-Lösung:
https://jsfiddle.net/b9chris/hweyecu4/17/
Beginnend mit einer Box wie:
<div id="box" class="hidden">Lorem</div>
Eine versteckte Kiste.
div.hidden {
display: none;
}
#box {
transition: opacity 1s;
}
Wir werden einen Trick verwenden, der in einem verwandten Q / A gefunden wird, und OffsetHeight überprüfen, um den Browser sofort zu drosseln:
https://stackoverflow.com/a/16575811/176877
Zunächst eine Bibliothek, die den obigen Trick formalisiert:
$.fn.noTrnsn = function () {
return this.each(function (i, tag) {
tag.style.transition = 'none';
});
};
$.fn.resumeTrnsn = function () {
return this.each(function (i, tag) {
tag.offsetHeight;
tag.style.transition = null;
});
};
Als nächstes werden wir es verwenden, um eine Box zu enthüllen und sie einzublenden:
$('#button').on('click', function() {
var tag = $('#box');
if (tag.hasClass('hidden'))
tag.noTrnsn().removeClass('hidden')
.css({ opacity: 0 })
.resumeTrnsn().css({ opacity: 1 });
else
tag.css({ opacity: 0 });
});
Dadurch wird die Box ein- und ausgeblendet. Deaktiviert also .noTrnsn()Übergänge, dann entfernen wir die hiddenKlasse, die displayvon noneihrer Standardeinstellung wechselt block. Wir setzen dann die Deckkraft auf 0, um uns auf das Einblenden vorzubereiten. Nachdem wir die Bühne eingerichtet haben, schalten wir die Übergänge mit wieder ein .resumeTrnsn(). Beginnen Sie den Übergang, indem Sie die Deckkraft auf 1 setzen.
Ohne die Bibliothek hätten sowohl die Änderung der Anzeige als auch die Änderung der Deckkraft zu unerwünschten Ergebnissen geführt. Wenn wir die Bibliotheksaufrufe einfach entfernen würden, würden wir überhaupt keine Übergänge erhalten.
Beachten Sie, dass die Anzeige am Ende der Ausblendanimation nicht erneut auf "Keine" gesetzt wird. Wir können aber schicker werden. Lassen Sie uns dies mit einem tun, der einblendet und von 0 an an Höhe zunimmt.
Schick!
https://jsfiddle.net/b9chris/hweyecu4/22/
#box {
transition: height 1s, opacity 1s;
}
Wir wechseln jetzt sowohl Höhe als auch Deckkraft. Beachten Sie, dass wir keine Höhe einstellen, was bedeutet, dass dies die Standardeinstellung ist auto. Herkömmlicherweise kann dies nicht geändert werden. Wenn Sie von Auto zu einem Pixelwert (wie 0) wechseln, erhalten Sie keinen Übergang. Wir werden das mit der Bibliothek und einer weiteren Bibliotheksmethode umgehen:
$.fn.wait = function (time, fn) {
if (time)
this.delay(time);
if (!fn)
return this;
var _this = this;
return this.queue(function (n) {
fn.call(_this);
n();
});
};
Dies ist eine praktische Methode, mit der wir an der vorhandenen fx / animation-Warteschlange von jQuery teilnehmen können, ohne das Animationsframework zu benötigen, das jetzt in jQuery 3.x ausgeschlossen ist. Ich werde nicht erklären, wie jQuery funktioniert, aber es reicht zu sagen, dass die von jQuery bereitgestellten .queue()und .stop()Installationen uns dabei helfen, zu verhindern, dass unsere Animationen aufeinander treten.
Animieren wir den Slide-Down-Effekt.
$('#button').on('click', function() {
var tag = $('#box');
if (tag.hasClass('hidden')) {
// Open it
// Measure it
tag.stop().noTrnsn().removeClass('hidden').css({
opacity: 0, height: 'auto'
});
var h = tag.height();
tag.css({ height: 0 }).resumeTrnsn()
// Animate it
.css({ opacity: 1, height: h })
.wait(1000, function() {
tag.css({ height: 'auto' });
});
} else {
// Close it
// Measure it
var h = tag.noTrnsn().height();
tag.stop().css({ height: h })
.resumeTrnsn()
// Animate it
.css({ opacity: 0, height: 0 })
.wait(1000, function() {
tag.addClass('hidden');
});
}
});
Dieser Code beginnt mit der Überprüfung #boxund ob er derzeit ausgeblendet ist, indem er seine Klasse überprüft. Mit dem wait()Bibliotheksaufruf wird jedoch mehr erreicht , indem die hiddenKlasse am Ende der Slideout- / Fade-Animation hinzugefügt wird, die Sie erwarten würden, wenn sie tatsächlich ausgeblendet ist - etwas, das das obige einfachere Beispiel nicht kann. Dies ermöglicht auch das wiederholte Ein- und Ausblenden des Elements, was im vorherigen Beispiel ein Fehler war, da die versteckte Klasse nie wiederhergestellt wurde.
Sie können auch sehen, dass CSS- und Klassenänderungen aufgerufen werden, .noTrnsn()um im Allgemeinen die Bühne für Animationen festzulegen, einschließlich Messungen, z. B. Messen der endgültigen Höhe, #boxohne dies dem Benutzer zu zeigen, bevor Sie aufrufen .resumeTrnsn(), und Animieren von diesem vollständigen Satz Stufe zu seinem Ziel CSS-Werte.
Alte Antwort
https://jsfiddle.net/b9chris/hweyecu4/1/
Sie können den Übergang per Mausklick mit:
function toggleTransition() {
var el = $("div.box1");
if (el.length) {
el[0].className = "box";
el.stop().css({maxWidth: 10000}).animate({maxWidth: 10001}, 2000, function() {
el[0].className = "box hidden";
});
} else {
el = $("div.box");
el[0].className = "box";
el.stop().css({maxWidth: 10001}).animate({maxWidth: 10000}, 50, function() {
el[0].className = "box box1";
});
}
return el;
}
someTag.click(toggleTransition);
Das CSS ist das, was Sie vermuten würden:
.hidden {
display: none;
}
.box {
width: 100px;
height: 100px;
background-color: blue;
color: yellow;
font-size: 18px;
left: 20px;
top: 20px;
position: absolute;
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
-webkit-transform: scale(.2);
transform: scale(.2);
-webkit-transition: transform 2s;
transition: transform 2s;
}
.box1{
-webkit-transform: scale(1);
transform: scale(1);
}
Der Schlüssel drosselt die Anzeigeeigenschaft. Wenn Sie die versteckte Klasse entfernen und dann 50 ms warten und dann den Übergang über die hinzugefügte Klasse starten, wird sie angezeigt und dann wie gewünscht erweitert, anstatt nur ohne Animation auf den Bildschirm zu blättern. Ähnliches geschieht in die andere Richtung, außer dass wir warten, bis die Animation beendet ist, bevor wir versteckt anwenden.
Hinweis: Ich missbrauche .animate(maxWidth)hier, um setTimeoutRennbedingungen zu vermeiden . setTimeoutEs ist schnell, versteckte Fehler einzuführen, wenn Sie oder jemand anderes Code aufnimmt, ohne es zu wissen. .animate()kann leicht mit getötet werden .stop(). Ich benutze es nur, um eine Verzögerung von 50 ms oder 2000 ms in die Standard-FX-Warteschlange zu setzen, wo es von anderen Codierern, die darauf aufbauen, leicht zu finden / aufzulösen ist.