Animation nach unten schieben von display:none zu display:block?
Lesezeit: 4 Minuten
APAD1
Gibt es eine Möglichkeit, display:none mit CSS zu display:block zu animieren, sodass das versteckte div nach unten gleitet, anstatt abrupt zu erscheinen, oder sollte ich das anders angehen?
Mehr hier: Div beim Klicken nach unten schieben Pures CSS?
Funktioniert nicht. Ich versuche, auf den schwarzen Balken (anfänglicher Inhalt) zu klicken, und nichts passiert.
– AlikElzin-kilaka
21. Mai 2015 um 10:50 Uhr
Dies beantwortet nicht die ursprüngliche Frage der Animation von display: none zu display: block. Dies ist wichtig für die Zugänglichkeit, um sicherzustellen, dass sich versteckte Inhalte nicht im Tab-Index usw. befinden.
– StueyKent
5. Oktober 2017 um 14:00 Uhr
Wir müssen keinen Übergang zur Unterklasse hinzufügen, wenn die Hauptklasse ihn bereits hat
– Nabel Khan
27. Mai 2018 um 20:19 Uhr
Aber Sie müssen die Höhe kennen, um die Animation zu machen. und Sie wissen es nicht innerhalb des CSS.
Dann müssen Sie nicht alle browserspezifischen Übergangs-CSS manuell ausführen.
Ich baute das alles manuell, weil ich es irgendwie übersehen hatte slideDown(). DANKE.
– aronmoshe_m
5. November 2020 um 0:26 Uhr
Ich mag die Idee von CSS-Übergängen, aber es ist immer noch sehr sprunghaft. Manchmal muss die maximale Höhe aufgrund dynamischer Inhalte auf eine sehr hohe Zahl eingestellt werden, was den Übergang unbrauchbar macht, da er sehr sprunghaft ist. Also ging ich zurück zu jQuery, aber es hatte seine eigenen Fehler. Inline-Elemente sind sprunghaft.
Ich habe festgestellt, dass dies für mich funktioniert:
Der Stopp stoppt alle vorherigen Übergänge. Das CSS stellt sicher, dass es als Blockelement behandelt wird, auch wenn dies nicht der Fall ist. Das Verbergen verbirgt dieses Element, aber jquery merkt es sich als Blockelement. und schließlich zeigt slideDown das Element, indem es nach unten geschoben wird.
Vielen Dank! Genau das, wonach ich gesucht habe 🙂 Wie kann ich es wieder hochschieben?
– Gintás K
4. Mai 2017 um 10:06 Uhr
Verwenden Sie wahrscheinlich slideUp anstelle von slideDown, vermute ich. $(this).find('.p').stop().css('display','block').hide().slideUp(); Oder können Sie slideToggle? $(this).find('.p').stop().css('display','block').hide().slideToggle();
– Webmaster G
5. Mai 2017 um 12:45 Uhr
Vielen Dank! eine einfache .stop().slideUp() hat funktioniert 🙂
– Gintás K
5. Mai 2017 um 13:00 Uhr
Wie wäre es mit
$("#yourdiv").animate({height: 'toggle'});
Toggle schaltet Ihr Div ein/aus, und die Animation sollte es von unten erscheinen lassen. In diesem Szenario benötigen Sie das spezifische CSS nicht, um es zu „verstecken“.
Wir können benutzen visibility: hidden zu visibility: visible Anstatt von display: none zu display: block Eigentum.
Siehe dieses Beispiel:
function toggleSlide () {
const div = document.querySelector('div')
if (div.classList.contains('open')) {
div.classList.remove('open')
} else {
div.classList.add('open')
}
}
div {
visibility: hidden;
transition: visibility .5s, max-height .5s;
max-height: 0;
overflow: hidden;
/* additional style */
background: grey;
color: white;
padding: 0px 12px;
margin-bottom: 8px;
}
div.open {
visibility: visible;
/* Set max-height to something bigger than the box could ever be */
max-height: 100px;
}
mögliches Duplikat von Slide down und slide up div on click
– TylerH
19. Juni 2014 um 19:25 Uhr
@TheOneWhoPrograms Bei dieser Frage geht es nicht um jQuery oder onClick.
– TylerH
19. Juni 2014 um 19:26 Uhr