Ich versuche, <ul>
mithilfe von CSS-Übergängen eine Folie nach unten zu erstellen.
Das <ul>
beginnt um height: 0;
. Beim Hover wird die Höhe auf eingestellt height:auto;
. Dies führt jedoch dazu, dass es einfach erscheint und nicht übergeht.
Wenn ich es von height: 40px;
bis mache height: auto;
, rutscht es nach oben height: 0;
und springt dann plötzlich auf die richtige Höhe.
Wie könnte ich das sonst ohne JavaScript tun?
#child0 {
height: 0;
overflow: hidden;
background-color: #dedede;
-moz-transition: height 1s ease;
-webkit-transition: height 1s ease;
-o-transition: height 1s ease;
transition: height 1s ease;
}
#parent0:hover #child0 {
height: auto;
}
#child40 {
height: 40px;
overflow: hidden;
background-color: #dedede;
-moz-transition: height 1s ease;
-webkit-transition: height 1s ease;
-o-transition: height 1s ease;
transition: height 1s ease;
}
#parent40:hover #child40 {
height: auto;
}
h1 {
font-weight: bold;
}
The only difference between the two snippets of CSS is one has height: 0, the other height: 40.
<hr>
<div id="parent0">
<h1>Hover me (height: 0)</h1>
<div id="child0">Some content
<br>Some content
<br>Some content
<br>Some content
<br>Some content
<br>Some content
<br>
</div>
</div>
<hr>
<div id="parent40">
<h1>Hover me (height: 40)</h1>
<div id="child40">Some content
<br>Some content
<br>Some content
<br>Some content
<br>Some content
<br>Some content
<br>
</div>
</div>
css
css-transitions
Hagelholz
quelle
quelle
height:auto/max-height
Lösung wird nur funktionieren, wenn Ihr erweiterter Bereich größer ist als der, denheight
Sie einschränken möchten. Wenn Sie eine habenmax-height
von300px
, aber ein Kombinationsfeld Dropdown - Liste , die zurückkehren50px
, dannmax-height
wird dir nicht helfen,50px
ist variabel , abhängig von der Anzahl der Elemente, können Sie in eine unmögliche Situation kommen , wo ich es nicht reparieren kann , weil dasheight
nicht der Fall ist behoben,height:auto
war die Lösung, aber ich kann keine Übergänge damit verwenden.Antworten:
Verwenden Sie
max-height
im Übergang und nichtheight
. Und setzen Sie einen Wert aufmax-height
etwas Größeres, als Ihre Box jemals bekommen wird.Eine weitere Antwort finden Sie in der JSFiddle-Demo von Chris Jordan .
quelle
Sie sollten stattdessen scaleY verwenden.
Ich habe eine herstellerpräfixierte Version des obigen Codes für jsfiddle erstellt und Ihre jsfiddle so geändert , dass scaleY anstelle von height verwendet wird.
quelle
Sie können derzeit keine Höhe animieren, wenn eine der beteiligten Höhen ist
auto
. Sie müssen zwei explizite Höhen festlegen.quelle
this.$element[dimension](this.$element[dimension]())[0].offsetHeight
auto
...Die Lösung , dass ich immer war zum ersten Ausblendung verwendet habe, dann schrumpfen die
font-size
,padding
undmargin
Werte. Es sieht nicht wie ein Wischtuch aus, funktioniert aber ohne statischesheight
odermax-height
.Arbeitsbeispiel:
quelle
*
und andere Änderungen anwenden. Schaltflächen sollten jedoch von meinem obigen Code betroffen sein, wenn sie korrekt gestaltet wurdenem
.line-height: 0;
undborder-width: 0;
line-height
vornehmen müssen, wenn Sie Einheiten für den Wert korrekt vermeiden: developer.mozilla.org/en-US/docs/Web/CSS/…Ich weiß, dass dies die dreißigste Antwort auf diese Frage ist, aber ich denke, es lohnt sich, also geht es weiter. Dies ist eine reine CSS- Lösung mit den folgenden Eigenschaften:
transform: scaleY(0)
ändert die tatsächliche Höhe (im Gegensatz zu ), also macht es das Richtige, wenn nach dem zusammenklappbaren Element Inhalt vorhanden ist.height: auto
) Status hat der gesamte Inhalt immer die richtige Höhe (im Gegensatz zum Beispiel, wenn Sie einen auswählenmax-height
, der sich als solche herausstellt zu niedrig). Und im zusammengeklappten Zustand ist die Höhe Null, wie sie sollte.Demo
Hier ist eine Demo mit drei zusammenklappbaren Elementen unterschiedlicher Höhe, die alle dasselbe CSS verwenden. Möglicherweise möchten Sie auf "ganze Seite" klicken, nachdem Sie auf "Snippet ausführen" geklickt haben. Beachten Sie, dass das JavaScript nur die
collapsed
CSS-Klasse umschaltet , es ist keine Messung erforderlich. (Sie können genau diese Demo ohne JavaScript ausführen, indem Sie ein Kontrollkästchen verwenden oder:target
). Beachten Sie auch, dass der Teil des CSS, der für den Übergang verantwortlich ist, ziemlich kurz ist und der HTML-Code nur ein einziges zusätzliches Wrapper-Element erfordert.Wie funktioniert es?
Es gibt tatsächlich zwei Übergänge, die dazu beitragen, dass dies geschieht. Einer von ihnen wechselt
margin-bottom
von 0px (im erweiterten Zustand)-2000px
in den reduzierten Zustand (ähnlich dieser Antwort ). Die 2000 hier ist die erste magische Zahl. Sie basiert auf der Annahme, dass Ihre Box nicht höher als diese ist (2000 Pixel scheinen eine vernünftige Wahl zu sein).Die
margin-bottom
alleinige Verwendung des Übergangs hat zwei Probleme:margin-bottom: -2000px
wird a nicht alles verbergen - es wird auch im zusammengeklappten Fall sichtbares Material geben. Dies ist eine kleine Korrektur, die wir später vornehmen werden.Bei der Behebung dieses zweiten Problems kommt der zweite Übergang ins Spiel, und dieser Übergang zielt konzeptionell auf die Mindesthöhe des Wrappers ab ("konzeptionell", da wir die
min-height
Eigenschaft dafür nicht verwenden; dazu später mehr).Hier ist eine Animation, die zeigt, wie die Kombination des Übergangs am unteren Rand mit dem Übergang der minimalen Höhe, beide von gleicher Dauer, einen kombinierten Übergang von voller Höhe zu Höhe von Null mit derselben Dauer ergibt.
Der linke Balken zeigt, wie der negative untere Rand den Boden nach oben drückt und die sichtbare Höhe verringert. Der mittlere Balken zeigt, wie die Mindesthöhe sicherstellt, dass im kollabierenden Fall der Übergang nicht vorzeitig endet und im expandierenden Fall der Übergang nicht zu spät beginnt. Der rechte Balken zeigt, wie die Kombination der beiden bewirkt, dass die Box in der richtigen Zeit von voller Höhe auf null Höhe übergeht.
Für meine Demo habe ich mich für 50px als oberen Mindesthöhenwert entschieden. Dies ist die zweite magische Zahl, und sie sollte niedriger sein als die Höhe der Box jemals sein würde. 50px scheint ebenfalls vernünftig zu sein; Es ist unwahrscheinlich, dass Sie ein Element sehr oft zusammenklappbar machen möchten, das überhaupt nicht einmal 50 Pixel hoch ist.
Wie Sie in der Animation sehen können, ist der resultierende Übergang kontinuierlich, aber nicht differenzierbar. In dem Moment, in dem die minimale Höhe gleich der vollen Höhe ist, die durch den unteren Rand eingestellt wird, ändert sich die Geschwindigkeit plötzlich. Dies macht sich in der Animation sehr bemerkbar, da für beide Übergänge eine lineare Timing-Funktion verwendet wird und der gesamte Übergang sehr langsam ist. Im tatsächlichen Fall (meine Demo oben) dauert der Übergang nur 300 ms, und der Übergang am unteren Rand ist nicht linear. Ich habe mit vielen verschiedenen Timing-Funktionen für beide Übergänge herumgespielt, und diejenigen, mit denen ich endete, hatten das Gefühl, dass sie für die unterschiedlichsten Fälle am besten funktionieren.
Zwei Probleme müssen noch behoben werden:
Wir lösen das erste Problem, indem wir dem Containerelement
max-height: 0
im reduzierten Fall ein a mit einem0s 0.3s
Übergang geben. Dies bedeutet, dass es sich nicht wirklich um einen Übergang handelt, der jedochmax-height
verzögert angewendet wird. Dies gilt nur, wenn der Übergang beendet ist. Damit dies korrekt funktioniert, müssen wir auch eine Zahlmax-height
für den entgegengesetzten, nicht reduzierten Zustand auswählen . Im Gegensatz zum Fall 2000px, bei dem die Auswahl einer zu großen Zahl die Qualität des Übergangs beeinflusst, spielt dies in diesem Fall keine Rolle. Wir können also einfach eine Zahl auswählen, die so hoch ist, dass wir wissen, dass keine Höhe jemals in die Nähe kommen wird. Ich habe eine Million Pixel ausgewählt. Wenn Sie der Meinung sind, dass Sie möglicherweise Inhalte mit einer Höhe von mehr als einer Million Pixel unterstützen müssen, dann 1) tut mir leid und 2) fügen Sie einfach ein paar Nullen hinzu.Das zweite Problem ist der Grund, warum wir nicht
min-height
für den minimalen Höhenübergang verwenden. Stattdessen befindet sich::after
im Container einheight
Pseudoelement mit einem Übergang von 50px zu Null. Dies hat den gleichen Effekt wiemin-height
: Es lässt den Container nicht unter die Höhe schrumpfen, die das Pseudoelement derzeit hat. Aber weil wirheight
nicht verwendenmin-height
, können wir jetztmax-height
(erneut mit Verzögerung angewendet) die tatsächliche Höhe des Pseudoelements auf Null setzen, sobald der Übergang beendet ist, um sicherzustellen, dass zumindest außerhalb des Übergangs auch kleine Elemente die haben richtige Höhe. Weilmin-height
es stärker ist alsmax-height
, würde dies nicht funktionieren, wenn wir die Containermin-height
anstelle der Pseudoelemente verwenden würdenheight
. Genau wiemax-height
im vorherigen Absatzmax-height
benötigt dies auch einen Wert für das andere Ende des Übergangs. Aber in diesem Fall können wir einfach die 50px auswählen.Getestet in Chrome (Win, Mac, Android, iOS), Firefox (Win, Mac, Android), Edge, IE11 (mit Ausnahme eines Flexbox-Layout-Problems mit meiner Demo, das ich nicht debuggt habe) und Safari (Mac, iOS) ). Apropos Flexbox: Es sollte möglich sein, diese Funktion ohne Verwendung einer Flexbox auszuführen. Tatsächlich denke ich, dass Sie fast alles in IE7 zum Laufen bringen können - mit Ausnahme der Tatsache, dass Sie keine CSS-Übergänge haben, was es zu einer ziemlich sinnlosen Übung macht.
quelle
collapsible-wrapper
Position absolut ist? Dasoverflow: hidden
auf dem übergeordneten Element wird für den Übergang benötigt, stört jedoch absolut positionierte Elemente.clip-path: polygon(...)
anstelle von gelöstoverflow: hidden
, da Sie im Gegensatz zu letzterem den ersteren wechseln können. Als Fallback für ältere Browser habe ich eine zusätzliche Skalierungstransformation verwendet. Siehe den Kommentar oben auf github.com/StackExchange/Stacks/blob/develop/lib/css/components/…Sie können mit ein wenig nicht-semantischem Jiggery-Pokery. Mein üblicher Ansatz besteht darin, die Höhe eines äußeren DIV zu animieren, der ein einzelnes Kind hat. Dies ist ein stilloser DIV, der nur zum Messen der Inhaltshöhe verwendet wird.
Man möchte einfach in der Lage sein, auf das zu verzichten
.measuringWrapper
und die Höhe des DIV auf Auto zu setzen und diese Animation zu haben, aber das scheint nicht zu funktionieren (die Höhe wird eingestellt, aber es erfolgt keine Animation).Meine Interpretation ist, dass eine explizite Höhe erforderlich ist, damit die Animation ausgeführt werden kann. Sie können keine Animation zur Höhe erhalten, wenn eine der Höhen (Start- oder Endhöhe) ist
auto
.quelle
max-height
, keine Notwendigkeitauto
und vor allem keine Notwendigkeit für Javascript !! Nur zwei einfache Erklärungenmargin-top
(undmargin-bottom
) sind relativ zur Breite, wenn sie in Prozent definiert sind. Ja, das ist dumm, aber es erklärt auch, warum die Animationszeiten für das Öffnen und Schließen völlig unterschiedlich sind - es ist dasselbe, was Sie in der am besten bewerteten Antwort sehen, wenn Sie eine harte Antwort angeben -codierte maximale Höhe. Warum ist das so schwer richtig zu machen?Eine visuelle Problemumgehung zum Animieren der Höhe mithilfe von CSS3-Übergängen besteht darin, stattdessen das Auffüllen zu animieren.
Sie erhalten nicht den vollen Wipe-Effekt, aber wenn Sie mit der Übergangsdauer und den Füllwerten herumspielen, sollten Sie nah genug dran sein. Wenn Sie Höhe / maximale Höhe nicht explizit festlegen möchten, sollte dies das sein, wonach Sie suchen.
http://jsfiddle.net/catharsis/n5XfG/17/ (riffed von stephbands über jsFiddle)
quelle
Meine Problemumgehung besteht darin, die maximale Höhe für eine schöne, glatte Animation auf die exakte Inhaltshöhe umzustellen und dann mithilfe eines Rückrufs für TransitionEnd die maximale Höhe auf 9999 Pixel festzulegen, damit die Größe des Inhalts frei geändert werden kann.
quelle
.stop
jedoch der Trick für das ziemlich komplexe Problem der Animationsschleife. Wenn Sie jetzt Höhe und Farbe animieren, aber nur die Höhenanimation unterbrechen möchten, werden die Dinge etwas schwieriger ... Ich verstehe, worum es geht.Die akzeptierte Antwort funktioniert in den meisten Fällen, funktioniert jedoch nicht gut, wenn die
div
Höhe stark variieren kann. Die Animationsgeschwindigkeit hängt nicht von der tatsächlichen Höhe des Inhalts ab und kann abgehackt aussehen.Sie können die eigentliche Animation weiterhin mit CSS ausführen, müssen jedoch JavaScript verwenden, um die Höhe der Elemente zu berechnen, anstatt zu versuchen, sie zu verwenden
auto
. Es ist keine jQuery erforderlich, obwohl Sie dies möglicherweise ein wenig ändern müssen, wenn Sie Kompatibilität wünschen (funktioniert in der neuesten Version von Chrome :)).quelle
document.getElementById('mydiv')
oder$('#mydiv').get()
), und die Funktion wechselt zwischen dem Ausblenden / Anzeigen. Wenn Sie CSS-Übergänge einrichten, wird das Element automatisch animiert.min-height
wie in der erwarteten Antwort Probleme mit Animationsgeschwindigkeit verursacht , wenn die Größe der Liste kann stark variieren).Die
Element.scrollHeight
Eigenschaft, die hier nützlich sein kann und dennoch mit einem reinen CSS-Übergang verwendet werden kann, wurde kaum erwähnt . Die Eigenschaft enthält immer die "volle" Höhe eines Elements, unabhängig davon, ob und wie sein Inhalt infolge der reduzierten Höhe (zheight: 0
. B. ) überläuft .Als solches ist für ein
height: 0
(effektiv vollständig kollabiertes) Element seine "normale" oder "volle" Höhe durch seinenscrollHeight
Wert (ausnahmslos eine Pixellänge ) immer noch leicht verfügbar .Angenommen, für ein solches Element ist der Übergang bereits wie z. B. eingerichtet (unter Verwendung der
ul
ursprünglichen Frage):Wir können die gewünschte animierte "Erweiterung" der Höhe nur mit CSS mit etwa der folgenden Funktion auslösen (hier wird angenommen, dass sich die
ul
Variable auf die Liste bezieht):Das ist es. Wenn Sie die Liste reduzieren müssen, reicht eine der beiden folgenden Anweisungen aus:
Mein spezieller Anwendungsfall drehte sich um das Animieren von Listen unbekannter und oft beträchtlicher Länge. Daher war es mir unangenehm, mich auf eine willkürliche "groß genug"
height
odermax-height
Spezifikation zu einigen und das Risiko von abgeschnittenen Inhalten oder Inhalten einzugehen, die Sie plötzlich scrollen müssen (wennoverflow: auto
zum Beispiel). . Darüber hinaus wird die Lockerung und das Timing beimax-height
Lösungen auf Basis der Lösung unterbrochen , da die verwendete Höhe möglicherweise viel früher ihren Maximalwert erreicht, als diesmax-height
zum Erreichen erforderlich wäre9999px
. Und wenn die Bildschirmauflösungen zunehmen,9999px
hinterlassen Pixellängen einen schlechten Geschmack in meinem Mund. Diese spezielle Lösung löst das Problem meiner Meinung nach auf elegante Weise.Schließlich hoffen wir, dass zukünftige Überarbeitungen von CSS die Notwendigkeit der Autoren erfüllen, diese Art von Dingen noch eleganter zu machen - überdenken Sie den Begriff "berechnet" gegenüber "verwendeten" und "aufgelösten" Werten und überlegen Sie, ob Übergänge für berechnete Werte gelten sollten Werte, einschließlich Übergänge mit
width
undheight
(die derzeit eine besondere Behandlung erhalten).quelle
Element.scrollHeight
Eigenschaft JavaScript erforderlich ist und sie, wie in der Frage eindeutig angegeben, dies ohne JavaScript tun möchten .Verwendung
max-height
mit unterschiedlicher Übergangserleichterung und Verzögerung für jeden Zustand.HTML:
CSS:
Siehe Beispiel: http://jsfiddle.net/0hnjehjc/1/
quelle
999999px
. Dies verschiebt andererseits Ihre Animation, da die Frames aus diesem Wert berechnet werden. Sie könnten also mit einer "Verzögerung" der Animation in eine Richtung und einem wirklich schnellen Ende in die andere Richtung enden (korr.: Timing-Funktionen)Keine fest codierten Werte.
Kein JavaScript.
Keine Annäherungen.
Der Trick besteht darin, ein verstecktes und dupliziertes
div
zu verwenden, damit der Browser versteht, was 100% bedeutet.Diese Methode eignet sich immer dann, wenn Sie das DOM des Elements, das Sie animieren möchten, duplizieren können.
quelle
transform: scaleY(1)
, da durch diesen Übergang kein Leerzeichen entfernt wird.Während ich dies poste, gibt es bereits über 30 Antworten, aber ich habe das Gefühl, dass sich meine Antwort gegenüber der bereits akzeptierten Antwort von Jake verbessert .
Ich war nicht zufrieden mit dem Problem, das sich aus der einfachen Verwendung von
max-height
CSS3-Übergängen ergibt , da Sie, wie viele Kommentatoren feststellten, Ihrenmax-height
Wert sehr nahe an der tatsächlichen Höhe einstellen müssen, da sonst eine Verzögerung auftritt. In dieser JSFiddle finden Sie ein Beispiel für dieses Problem.Um dies zu umgehen (ohne JavaScript zu verwenden), habe ich ein weiteres HTML-Element hinzugefügt, das den
transform: translateY
CSS-Wert überführt.Dies bedeutet beides
max-height
undtranslateY
wird verwendet:max-height
Ermöglicht dem Element, Elemente darunter nach unten zu drücken, währendtranslateY
der gewünschte "Sofort" -Effekt erzielt wird. Das Problem mitmax-height
besteht immer noch, aber seine Wirkung wird verringert. Dies bedeutet, dass Sie eine viel größere Höhe für Ihrenmax-height
Wert einstellen und sich weniger Sorgen machen können.Der Gesamtvorteil besteht darin, dass der Benutzer beim Übergang zurück in (dem Zusammenbruch) die
translateY
Animation sofort sieht , sodass es nicht wirklich darauf ankommt, wie lange diesmax-height
dauert.Lösung als Geige
quelle
translateY
über,scale
weil ich nicht mochte, wiescale
dieser Komprimierungseffekt gab.Ok, ich denke, ich habe eine super einfache Antwort gefunden ... nein
max-height
, verwendetrelative
Positionierung, arbeitet anli
Elementen und ist reines CSS. Ich habe in nichts anderem als Firefox getestet, obwohl es nach CSS nach allen Browsern funktionieren sollte.FIDDLE: http://jsfiddle.net/n5XfG/2596/
CSS
HTML
quelle
BEARBEITEN: Scrollen Sie nach unten, um eine aktualisierte Antwort zu erhalten.
Ich habe eine Dropdown-Liste erstellt und diesen Beitrag gesehen ... viele verschiedene Antworten, aber ich entscheide mich, meine Dropdown-Liste auch zu teilen. Es ist nicht perfekt, aber zumindest wird nur CSS für verwendet Dropdown-Liste! Ich habe transform: translateY (y) verwendet, um die Liste in die Ansicht zu transformieren ...
Sie können mehr im Test sehen
http://jsfiddle.net/BVEpc/4/
Ich habe div hinter jedes li gesetzt, weil mein Die Dropdown-Liste kommt von oben und um ihnen richtig zu zeigen, dass dies erforderlich war, lautet mein Div-Code:
und schweben ist:
und weil die ul-höhe auf den inhalt eingestellt ist, kann es über deinen körperinhalt kommen, deshalb habe ich das für ul gemacht:
und schwebe:
Das zweite Mal nach dem Übergang ist eine Verzögerung und es wird ausgeblendet, nachdem meine Dropdown-Liste ungefähr geschlossen wurde ... Ich
hoffe, dass später jemand davon profitiert.
EDIT: Ich kann einfach nicht glauben, dass ppl diesen Prototyp tatsächlich benutzt! Dieses Dropdown-Menü ist nur für ein Untermenü und das ist alles !! Ich habe ein besseres aktualisiert, das zwei Untermenüs für ltr- und rtl-Richtung mit IE 8-Unterstützung haben kann.
Fiddle for LTR
Fiddle for RTL
hoffentlich findet jemand dies in Zukunft nützlich.
quelle
Sie können von Höhe: 0 zu Höhe: Automatisch wechseln, sofern Sie auch die Mindest- und Höchsthöhe angeben.
quelle
Flexbox-Lösung
Vorteile:
Nachteile:
Die Art und Weise, wie es funktioniert, besteht darin, immer eine Flex-Basis zu haben: Auto auf dem Element mit Inhalt und stattdessen Flex-Grow und Flex-Shrink.
Bearbeiten: Verbesserte JS-Geige, inspiriert von der Xbox One-Oberfläche.
JS Fiddle
quelle
Wenn Sie die Antwort von @ jake erweitern, wird der Übergang bis zum maximalen Höhenwert ausgeführt, was zu einer extrem schnellen Animation führt. Wenn Sie die Übergänge für beide festlegen: Schweben und Ausschalten, können Sie die verrückte Geschwindigkeit ein wenig mehr steuern.
Der Li: Hover ist also, wenn die Maus in den Status wechselt und der Übergang für die nicht schwebende Eigenschaft der Mausausgang ist.
Hoffentlich hilft das etwas.
z.B:
Hier ist eine Geige: http://jsfiddle.net/BukwJ/
quelle
Ich denke, ich habe eine wirklich solide Lösung gefunden
OK! Ich weiß, dass dieses Problem so alt ist wie das Internet, aber ich glaube, ich habe eine Lösung, die ich in ein Plugin namens Mutant-Transition verwandelt habe . Meine Lösung legt die
style=""
Attribute für verfolgte Elemente fest, wenn sich das DOM ändert. Das Endergebnis ist, dass Sie gutes altes CSS für Ihre Übergänge verwenden können und keine hackigen Fixes oder spezielles Javascript verwenden. Das einzige, was Sie tun müssen, ist festzulegen, was Sie mit dem betreffenden Element verfolgen möchtendata-mutant-attributes="X"
.Das ist es! Diese Lösung verwendet MutationObserver , um Änderungen im DOM zu verfolgen. Aus diesem Grund müssen Sie nichts einrichten oder Javascript verwenden, um Dinge manuell zu animieren. Änderungen werden automatisch nachverfolgt. Da jedoch MutationObserver verwendet wird, wird dies nur in IE11 + übergehen.
Geigen!
height: auto
nachheight: 100%
height: auto
beim Hinzufügen von Kindernquelle
Hier ist eine Möglichkeit, von einer beliebigen Starthöhe, einschließlich 0, zu einer automatischen (voller Größe und flexibel) überzugehen, ohne dass ein fest festgelegter Code pro Knoten oder ein Benutzercode zum Initialisieren erforderlich ist: https://github.com/csuwildcat / Transition-Auto . Dies ist im Grunde der heilige Gral für das, was Sie wollen, glaube ich -> http://codepen.io/csuwldcat/pen/kwsdF . Fügen Sie einfach die folgende JS-Datei in Ihre Seite ein, und danach müssen Sie nur noch ein einzelnes boolesches Attribut hinzufügen / entfernen -
reveal=""
- von den Knoten, die Sie erweitern und verkleinern möchten.Hier ist alles, was Sie als Benutzer tun müssen, sobald Sie den Codeblock unter dem Beispielcode eingefügt haben:
Hier ist der Codeblock, der in Ihre Seite aufgenommen werden soll. Danach ist alles Sauce:
Legen Sie diese JS-Datei auf Ihrer Seite ab - alles funktioniert
/ * Code für Höhe: auto; Übergang * /
/ * Code für DEMO * /
quelle
clip
als Dummy-Eigenschaftsauslöser verwendet, und aus irgendeinem Grund hat der IE die Animation von Clips eingestellt. Ich habe auf Deckkraft umgestellt und alles funktioniert wieder: codepen.io/csuwldcat/pen/FpzGa . Ich habe den Code in der Antwort entsprechend aktualisiert.Jakes Antwort, die maximale Höhe zu animieren, ist großartig, aber ich fand die Verzögerung, die durch das Einstellen einer großen maximalen Höhe verursacht wurde, ärgerlich.
Man könnte den zusammenklappbaren Inhalt in ein inneres Div verschieben und die maximale Höhe berechnen, indem man die Höhe des inneren Div ermittelt (über JQuery wäre es das OuterHeight ()).
Hier ist ein jsfiddle-Link: http://jsfiddle.net/pbatey/duZpT
Hier ist eine jsfiddle mit der absolut minimalen Menge an Code, die erforderlich ist: http://jsfiddle.net/8ncjjxh8/
quelle
Mir ist klar, dass dieser Thread in die Jahre gekommen ist, aber bei bestimmten Google-Suchanfragen einen hohen Stellenwert hat. Ich denke, es lohnt sich, ihn zu aktualisieren.
Sie erhalten / stellen auch einfach die eigene Höhe des Elements ein:
Sie sollten dieses Javascript unmittelbar nach dem schließenden Tag von target_box in einem Inline-Skript-Tag sichern.
quelle
Ich konnte das tun. Ich habe ein
.child
& ein.parent
div. Das Kinder-Div passt mit derabsolute
Positionierung perfekt in die Breite / Höhe des Elternteils . Ich animiere dann dietranslate
Eigenschaft, um ihrenY
Wert nach unten zu drücken100%
. Seine sehr flüssige Animation, keine Störungen oder Nachteile wie bei jeder anderen Lösung hier.So etwas wie Pseudocode
Sie würden angeben , eine
height
auf.parent
, inpx
,%
oder Urlaub , wieauto
. Dieses Div maskiert dann das.child
Div, wenn es nach unten rutscht.quelle
Ich habe eine Antwort mit etwas JavaScript gepostet und wurde herabgestimmt, war also verärgert und habe es erneut versucht und habe sie nur mit CSS geknackt!
Diese Lösung verwendet einige "Techniken":
padding-bottom:100%
'Hack', bei dem Prozentsätze in Bezug auf die aktuelle Breite des Elements definiert werden. Weitere Infos zu dieser Technik.Das Ergebnis ist jedoch, dass wir einen performanten Übergang nur mit CSS und eine einzige Übergangsfunktion erhalten, um den Übergang reibungslos zu erreichen. Der Heilige Gral!
Natürlich gibt es einen Nachteil! Ich kann nicht herausfinden, wie die Breite gesteuert werden soll, bei der Inhalte abgeschnitten werden (
overflow:hidden
). Aufgrund des Polster-Boden-Hacks sind Breite und Höhe eng miteinander verbunden. Es kann aber einen Weg geben, also werde ich darauf zurückkommen.https://jsfiddle.net/EoghanM/n1rp3zb4/28/
quelle
input[type="checkbox"]:checked
anstatt,:hover
wenn Sie möchten (dh Sie möchten kein JavaScript verwenden, um Klassen hinzuzufügen)Hier ist eine Lösung, die ich gerade in Kombination mit jQuery verwendet habe. Dies funktioniert für die folgende HTML-Struktur:
und die Funktion:
Sie können dann eine Klickfunktion verwenden, um die Höhe mithilfe von festzulegen und zu entfernen
css()
CSS:
quelle
Ich habe kürzlich eher
max-height
dieli
Elemente als die Umhüllung geändertul
.Der Grund dafür ist, dass die Verzögerung für kleine
max-heights
(wenn überhaupt) im Vergleich zu großen weitaus weniger spürbar istmax-heights
, und ich kann meinenmax-height
Wert auch relativ zu derfont-size
vonli
und nicht von einer beliebigen großen Zahl festlegen, indem ichems
oder verwenderems
.Wenn meine Schriftgröße ist
1rem
, setze ich meinemax-height
auf etwas wie3rem
(um umbrochenen Text aufzunehmen). Sie können hier ein Beispiel sehen:http://codepen.io/mindfullsilence/pen/DtzjE
quelle
Ich habe nicht alles im Detail gelesen, aber ich hatte kürzlich dieses Problem und habe Folgendes getan:
Auf diese Weise können Sie ein Div erstellen, das zunächst Inhalte mit einer Höhe von bis zu 200 Pixel anzeigt und beim Schweben mindestens so groß ist wie der gesamte Inhalt des Div. Die Div wird nicht 3000px, aber 3000px ist die Grenze, die ich auferlege. Stellen Sie sicher, dass der Übergang auf non: hover erfolgt, da Sie sonst möglicherweise ein seltsames Rendering erhalten. Auf diese Weise erbt der: hover vom non: hover.
Der Übergang von px zu% oder zu auto funktioniert nicht. Sie müssen dieselbe Maßeinheit verwenden. Das funktioniert gut für mich. Die Verwendung von HTML5 macht es perfekt ....
Denken Sie daran, dass es immer eine Arbeit gibt ...; )
Hoffe, jemand findet das nützlich
quelle
Die Max-Height-Lösung von Jake funktioniert gut, wenn der angegebene hartcodierte Max-Height-Wert nicht viel größer als die tatsächliche Höhe ist (da sonst unerwünschte Verzögerungen und Zeitprobleme auftreten). Wenn andererseits der fest codierte Wert versehentlich nicht größer als die tatsächliche Höhe ist, öffnet sich das Element nicht vollständig.
Die folgende Nur-CSS-Lösung erfordert auch eine fest codierte Größe, die größer sein sollte als die meisten der auftretenden realen Größen. Diese Lösung funktioniert jedoch auch, wenn die tatsächliche Größe in einigen Situationen größer als die fest codierte Größe ist. In diesem Fall springt der Übergang möglicherweise etwas, hinterlässt jedoch niemals ein teilweise sichtbares Element. Diese Lösung kann also auch für unbekannte Inhalte verwendet werden, z. B. aus einer Datenbank, in der Sie nur wissen, dass der Inhalt normalerweise nicht größer als x Pixel ist, es gibt jedoch Ausnahmen.
Die Idee ist, einen negativen Wert für den unteren Rand (oder den oberen Rand für eine etwas andere Animation) zu verwenden und das Inhaltselement in ein mittleres Element mit Überlauf zu platzieren: versteckt. Der negative Rand des Inhaltselements verringert somit die Höhe des mittleren Elements.
Der folgende Code verwendet einen Übergang am unteren Rand von -150px zu 0px. Dies allein funktioniert einwandfrei, solange das Inhaltselement nicht höher als 150 Pixel ist. Außerdem wird für das mittlere Element ein Übergang der maximalen Höhe von 0px zu 100% verwendet. Dadurch wird das mittlere Element schließlich ausgeblendet, wenn das Inhaltselement höher als 150 Pixel ist. Bei maximaler Höhe wird der Übergang nur verwendet, um seine Anwendung beim Schließen um eine Sekunde zu verzögern, nicht für einen glatten visuellen Effekt (und kann daher von 0px bis 100% laufen).
CSS:
HTML:
Der Wert für den unteren Rand sollte negativ sein und so nahe wie möglich an der tatsächlichen Höhe des Inhaltselements liegen. Wenn es (der Absoute-Wert) größer ist, gibt es ähnliche Verzögerungs- und Zeitprobleme wie bei den Lösungen mit maximaler Höhe, die jedoch begrenzt werden können, solange die fest codierte Größe nicht viel größer als die tatsächliche ist. Wenn der Absolutwert für Rand-Boden kleiner als die tatsächliche Höhe ist, springt die Tansition etwas. In jedem Fall wird das Inhaltselement nach dem Übergang entweder vollständig angezeigt oder vollständig entfernt.
Weitere Informationen finden Sie in meinem Blogbeitrag unter http://www.taccgl.org/blog/css_transition_display.html#combined_height
quelle
Sie können dies tun, indem Sie eine umgekehrte (Reduzierungs-) Animation mit Clip-Pfad erstellen.
quelle
Dies ist nicht gerade eine "Lösung" für das Problem, sondern eher eine Problemumgehung. Es funktioniert nur so, wie es mit Text geschrieben wurde, kann aber bei Bedarf geändert werden, um mit anderen Elementen zu arbeiten, da bin ich mir sicher.
Hier ist ein Beispiel: http://codepen.io/overthemike/pen/wzjRKa
Im Wesentlichen setzen Sie die Schriftgröße auf 0 und wechseln diese anstelle der Höhe oder der maximalen Höhe oder der SkalierungY () usw. schnell genug, um die Höhe so zu gestalten, wie Sie es möchten. Das Umwandeln der tatsächlichen Höhe mit CSS in Auto ist derzeit nicht möglich, das Umwandeln des Inhalts jedoch ist möglich, daher der Übergang der Schriftgröße.
quelle