Usiłuję <ul>
zjechać w dół za pomocą przejść CSS.
<ul>
Zaczyna się height: 0;
. Po najechaniu kursorem wysokość jest ustawiona na height:auto;
. Jednak powoduje to, że po prostu pojawia się, a nie przejście,
Jeśli zrobię to od height: 40px;
do height: auto;
, wtedy przesunie się w górę height: 0;
, a następnie nagle skoczy na odpowiednią wysokość.
Jak inaczej mogę to zrobić bez użycia JavaScript?
#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
Hailwood
źródło
źródło
height:auto/max-height
rozwiązanie będzie działać tylko wtedy, gdy obszar powiększania jest większy niżheight
chcesz ograniczyć. Jeśli maszmax-height
od300px
, ale rozwijana pola kombi, które mogą wrócić50px
, tomax-height
nie pomoże,50px
jest zmienna w zależności od liczby elementów, można dotrzeć do niemożliwej sytuacji, gdy nie można ustalić go, ponieważheight
nie jest naprawiono,height:auto
było rozwiązaniem, ale nie mogę z tym korzystać z przejść.Odpowiedzi:
Użyj
max-height
w przejściu i nieheight
. I ustaw wartość namax-height
coś większego niż twoje pudełko kiedykolwiek dostanie.Zobacz demo JSFiddle dostarczone przez Chrisa Jordana w innej odpowiedzi tutaj.
źródło
Zamiast tego powinieneś użyć skaliY.
Stworzyłem wersję jsfiddle z prefiksem dostawcy i zmieniłem twój jsfiddle, aby używał skaliY zamiast wysokości.
źródło
Obecnie nie można animować wysokości, gdy jedną z zaangażowanych wysokości jest
auto
, musisz ustawić dwie wyraźne wysokości.źródło
this.$element[dimension](this.$element[dimension]())[0].offsetHeight
auto
...Rozwiązanie, które ja zawsze używany był do pierwszego zanikają, a następnie kurczą się
font-size
,padding
imargin
wartości. Nie wygląda tak samo jak ścieranie, ale działa bez zakłóceńheight
lubmax-height
.Przykład roboczy:
źródło
*
i stosując inne zmiany. Jednak mój powyższy kod powinien mieć wpływ na przyciski, jeśli były poprawnie stylizowaneem
.line-height: 0;
iborder-width: 0;
line-height
jeśli poprawnie unikniesz jednostek o wartości: developer.mozilla.org/en-US/docs/Web/CSS/…Wiem, że to trzydziesta odpowiedź na to pytanie, ale myślę, że warto, więc proszę. Jest to rozwiązanie tylko do obsługi CSS o następujących właściwościach:
transform: scaleY(0)
), więc robi to dobrze, jeśli po składanym elemencie jest treść.height: auto
) cała zawartość zawsze ma odpowiednią wysokość (w przeciwieństwie do np. Wybrania takiego,max-height
który okazuje się być za nisko). A w stanie złożonym wysokość wynosi zero, tak jak powinna.Próbny
Oto demo z trzema składanymi elementami, o różnych wysokościach, które wykorzystują ten sam CSS. Możesz kliknąć „całą stronę” po kliknięciu „uruchom snippet”. Zauważ, że JavaScript przełącza tylko
collapsed
klasę CSS, nie wymaga żadnego pomiaru. (Możesz zrobić dokładnie to demo bez JavaScript, używając pola wyboru lub:target
). Zauważ też, że część CSS odpowiedzialna za przejście jest dość krótka, a HTML wymaga tylko jednego dodatkowego elementu opakowania.Jak to działa?
W rzeczywistości dwie zmiany są zaangażowane w realizację tego. Jedna z nich zmienia stan
margin-bottom
z 0px (w stanie rozwiniętym) na-2000px
stan zwinięty (podobny do tej odpowiedzi ). 2000 tutaj jest pierwszą magiczną liczbą, opiera się na założeniu, że twoje pudełko nie będzie wyższe niż to (2000 pikseli wydaje się rozsądnym wyborem).margin-bottom
Samo użycie przejścia ma dwa problemy:margin-bottom: -2000px
nie ukryje wszystkiego - będą widoczne rzeczy nawet w zwiniętej obudowie. To drobna poprawka, którą zrobimy później.Naprawienie drugiego problemu polega na tym, że pojawia się drugie przejście, a to przejście koncepcyjnie jest ukierunkowane na minimalną wysokość opakowania („koncepcyjnie”, ponieważ tak naprawdę nie używamy
min-height
do tego właściwości; więcej na ten temat później).Oto animacja pokazująca, jak połączenie przejścia dolnego marginesu z przejściem minimalnej wysokości, oba o jednakowym czasie trwania, daje nam połączone przejście z pełnej wysokości do zera wysokości, które ma taki sam czas trwania.
Lewy pasek pokazuje, w jaki sposób ujemny dolny margines popycha dno w górę, zmniejszając widoczną wysokość. Środkowy pasek pokazuje, w jaki sposób minimalna wysokość zapewnia, że w przypadku zwijania przejście nie kończy się wcześnie, aw przypadku rozszerzania przejście nie zaczyna się późno. Prawy pasek pokazuje, w jaki sposób połączenie tych dwóch powoduje przejście skrzynki z pełnej wysokości do zera wysokości w odpowiednim czasie.
W przypadku mojej wersji demonstracyjnej zdecydowałem się na 50 pikseli jako górną minimalną wartość wysokości. To druga magiczna liczba, która powinna być niższa niż kiedykolwiek wysokość pudełka. 50 pikseli również wydaje się rozsądne; wydaje się mało prawdopodobne, że bardzo często chciałbyś, aby element składany nie miał nawet 50 pikseli wysokości.
Jak widać na animacji, powstałe przejście jest ciągłe, ale nie można go rozróżnić - w momencie, gdy minimalna wysokość jest równa pełnej wysokości skorygowanej o dolny margines, następuje nagła zmiana prędkości. Jest to bardzo widoczne w animacji, ponieważ wykorzystuje liniową funkcję synchronizacji dla obu przejść i ponieważ całe przejście jest bardzo wolne. W rzeczywistym przypadku (moje demo u góry) przejście zajmuje tylko 300 ms, a przejście dolnego marginesu nie jest liniowe. Grałem z wieloma różnymi funkcjami pomiaru czasu dla obu przejść, a te, w których skończyłem, wydawały się działać najlepiej w najróżniejszych przypadkach.
Do rozwiązania pozostają dwa problemy:
Pierwszy problem rozwiązujemy, nadając elementowi kontenerowi
max-height: 0
zwiniętą skrzynkę z0s 0.3s
przejściem. Oznacza to, że tak naprawdę nie jest to przejście, alemax-height
jest stosowane z opóźnieniem; ma zastosowanie tylko po zakończeniu przejścia. Aby to działało poprawnie, musimy również wybrać wartość liczbowąmax-height
dla przeciwnego, nie zwiniętego stanu. Ale w przeciwieństwie do przypadku 2000px, w którym wybranie zbyt dużej liczby wpływa na jakość przejścia, w tym przypadku tak naprawdę nie ma znaczenia. Możemy więc wybrać liczbę, która jest tak wysoka, że wiemy, że żadna wysokość nigdy nie zbliży się do tego. Wybrałem milion pikseli. Jeśli uważasz, że możesz potrzebować obsługiwać zawartość o wysokości większej niż milion pikseli, to 1) Przepraszam i 2) po prostu dodaj kilka zer.Drugi problem jest powodem, dla którego tak naprawdę nie używamy
min-height
do przejścia minimalnej wysokości. Zamiast tego::after
w kontenerze znajduje się pseudoelement,height
który zmienia się z 50px na zero. Ma to taki sam efekt jakmin-height
: Nie pozwoli, aby pojemnik zmniejszył się poniżej jakiejkolwiek wysokości, jaką aktualnie ma pseudoelement. Ale ponieważ używamyheight
, niemin-height
, możemy teraz użyćmax-height
(ponownie zastosowane z opóźnieniem), aby ustawić rzeczywistą wysokość pseudoelementu na zero po zakończeniu przejścia, zapewniając, że przynajmniej poza przejściem nawet małe elementy mają prawidłowa wysokość. Ponieważmin-height
jest silniejszy niżmax-height
, nie działałoby to, gdybyśmy użyli konteneramin-height
zamiast pseudoelementuheight
. Podobnie jakmax-height
w poprzednim akapicie,max-height
wymaga to również wartości dla przeciwnego końca przejścia. Ale w tym przypadku możemy po prostu wybrać 50 pikseli.Testowane w Chrome (Win, Mac, Android, iOS), Firefox (Win, Mac, Android), Edge, IE11 (z wyjątkiem problemu z układem Flexbox w mojej wersji demonstracyjnej, że nie zawracałem sobie głowy debugowaniem) i Safari (Mac, iOS ). Mówiąc o Flexboksie, powinno być możliwe, aby działało to bez użycia Flexboksa; w rzeczywistości myślę, że możesz sprawić, by prawie wszystko działało w IE7 - z wyjątkiem faktu, że nie będziesz mieć przejść CSS, co czyni je raczej bezcelowym ćwiczeniem.
źródło
collapsible-wrapper
pozycja ma pozycję bezwzględną. Elementoverflow: hidden
nadrzędny jest wymagany do przejścia, ale koliduje z absolutnie pozycjonowanymi elementami.clip-path: polygon(...)
zamiastoverflow: hidden
, ponieważ w przeciwieństwie do drugiego, możesz zmienić pierwszy. Jako rezerwę dla starszych przeglądarek użyłem dodatkowej transformacji skalowania. Zobacz komentarz na górze github.com/StackExchange/Stacks/blob/develop/lib/css/components/…Możesz, z odrobiną nie-semantycznej jiggery-pokery. Moje zwykłe podejście polega na animowaniu wysokości zewnętrznego DIV, który ma jedno dziecko, które jest DIV bez stylu używanym tylko do pomiaru wysokości zawartości.
Chciałoby się po prostu zrezygnować
.measuringWrapper
i ustawić wysokość DIV na auto i mieć animację, ale wydaje się, że to nie działa (wysokość zostaje ustawiona, ale nie ma animacji).Moja interpretacja jest taka, że do uruchomienia animacji potrzebna jest wyraźna wysokość. Nie można uzyskać animacji wysokości, gdy jest to wysokość (wysokość początkowa lub końcowa)
auto
.źródło
max-height
, nie ma potrzebyauto
, a zwłaszcza nie ma potrzeby korzystania z Javascript !! Tylko dwie proste deklaracjemargin-top
(imargin-bottom
) są określone w stosunku do szerokości, gdy są zdefiniowane w procentach, tak, to głupie, ale wyjaśnia również, dlaczego czasy otwierania i zamykania animacji są zupełnie inne - to to samo, co widzisz w najlepiej ocenianej odpowiedzi, określając trudny -kodowana maksymalna wysokość. Dlaczego tak trudno to zrobić dobrze?Wizualnym obejściem animacji wysokości za pomocą przejść CSS3 jest zamiast tego animacja wypełnienia.
Nie do końca uzyskujesz pełny efekt czyszczenia, ale zabawa z czasem przejścia i wartościami wypełnienia powinna sprawić, że będziesz wystarczająco blisko. Jeśli nie chcesz jawnie ustawiać wysokości / maksymalnej wysokości, powinno być to, czego szukasz.
http://jsfiddle.net/catharsis/n5XfG/17/ (riffed off stephband's powyżej jsFiddle)
źródło
Moim obejściem jest przeniesienie maksymalnej wysokości na dokładną wysokość zawartości, aby uzyskać płynną animację, a następnie użyć wywołania zwrotnego przejścia, aby ustawić maksymalną wysokość na 9999 pikseli, aby zawartość mogła swobodnie się zmieniać.
źródło
.stop
rozwiązuje problem dość złożonego problemu z pętlą animacji. Teraz, kiedy animujesz wysokość i kolor, ale chcesz przerwać tylko animację wysokości, sprawy stają się trochę trudniejsze ... Rozumiem.Przyjęta odpowiedź działa w większości przypadków, ale nie działa dobrze, gdy
div
wysokość może się znacznie różnić - szybkość animacji nie zależy od rzeczywistej wysokości zawartości i może wyglądać na nierówną.Nadal możesz wykonywać rzeczywistą animację za pomocą CSS, ale musisz użyć JavaScript, aby obliczyć wysokość elementów, zamiast próbować użyć
auto
. JQuery nie jest wymagane, ale może być nieco zmodyfikowane, jeśli chcesz kompatybilności (działa w najnowszej wersji Chrome :)).źródło
document.getElementById('mydiv')
lub$('#mydiv').get()
), a funkcja przełącza się między ukrywaniem / pokazywaniem go. Jeśli skonfigurujesz przejścia CSS, element będzie animowany automatycznie.min-height
jak w oczekiwanej odpowiedzi powoduje problemy z szybkością animacji, gdy wielkość listy może się znacznie różnić).Niewiele wspominano o
Element.scrollHeight
właściwości, która może być tu przydatna i nadal może być używana z czystym przejściem CSS. Właściwość zawsze zawiera „pełną” wysokość elementu, niezależnie od tego, czy i jak jego zawartość przepełnia się w wyniku zwiniętej wysokości (npheight: 0
.).Jako taki, dla
height: 0
(skutecznie całkowicie zwiniętego) elementu jego „normalna” lub „pełna” wysokość jest nadal łatwo dostępna dzięki jegoscrollHeight
wartości (niezmiennie długości piksela ).Dla takiego elementu, zakładając, że ma już skonfigurowane przejście, takie jak np. (Używając
ul
jak na oryginalne pytanie):Możemy wywołać pożądaną animowaną „ekspansję” wysokości, używając tylko CSS, z czymś takim jak poniżej (przy założeniu, że
ul
zmienna odnosi się do listy):Otóż to. Jeśli musisz zwinąć listę, zrobi to jedna z dwóch następujących instrukcji:
Moim przypadku użycie obracało się wokół animacji wykazy nieznane i często znaczne długości, więc nie było wygodne osiadanie na arbitralne „wystarczająco duży”
height
lubmax-height
specyfikacji i ryzykując odcięcia treści lub treści, które nagle potrzebują do przewijania (jeślioverflow: auto
, na przykład) . Dodatkowo, łagodzenie i synchronizacja są zerwane zmax-height
rozwiązaniami opartymi na, ponieważ zastosowana wysokość może osiągnąć swoją maksymalną wartość znacznie wcześniej, niż bymax-height
to osiągnęło9999px
. Wraz ze wzrostem rozdzielczości ekranu długości pikseli9999px
pozostawiają w moich ustach zły smak. Moim zdaniem to szczególne rozwiązanie rozwiązuje problem w elegancki sposób.Wreszcie, mamy nadzieję, że przyszłe wersje autorów CSS będą musiały robić tego rodzaju rzeczy jeszcze bardziej elegancko - ponownie przyjrzyj się pojęciu wartości „obliczonych” vs. „użytych” i „rozwiązanych” i zastanów się, czy przejścia powinny dotyczyć obliczeń wartości, w tym przejścia z
width
iheight
(które obecnie są traktowane w specjalny sposób).źródło
Element.scrollHeight
właściwości wymaga JavaScript i, jak jasno wynika z pytania, chcą to zrobić bez JavaScript.Używaj
max-height
z innym łagodzeniem przejścia i opóźnieniem dla każdego stanu.HTML:
CSS:
Zobacz przykład: http://jsfiddle.net/0hnjehjc/1/
źródło
999999px
. To z kolei spowoduje przesunięcie animacji, ponieważ ramki są obliczane na podstawie tej wartości. Możesz więc skończyć z „opóźnieniem” animacji w jednym kierunku i naprawdę szybkim zakończeniem w drugim (corr: funkcje czasowe)Brak zakodowanych wartości.
Bez JavaScript.
Brak przybliżeń.
Sztuką jest użycie ukrytego i powielonego pliku,
div
aby przeglądarka zrozumiała, co oznacza 100%.Ta metoda jest odpowiednia, gdy tylko możesz zduplikować DOM elementu, który chcesz animować.
źródło
transform: scaleY(1)
, ponieważ to przejście nie usuwa przestrzeni.Gdy to piszę, jest już ponad 30 odpowiedzi, ale czuję, że moja odpowiedź poprawia się w stosunku do już zaakceptowanej odpowiedzi przez jake.
Nie byłem zadowolony z problemu, który wynika z prostego używania
max-height
i przejścia CSS3, ponieważ jak zauważyło wielu komentujących, musisz ustawić swojąmax-height
wartość bardzo blisko rzeczywistej wysokości, inaczej dostaniesz opóźnienie. Zobacz ten JSFiddle jako przykład tego problemu.Aby obejść ten problem (wciąż nie używając JavaScript), dodałem kolejny element HTML, który przenosi
transform: translateY
wartość CSS.Oznacza to jedno
max-height
i drugietranslateY
:max-height
pozwala elementowi zepchnąć elementy znajdujące się pod nim, a jednocześnietranslateY
daje pożądany efekt „natychmiastowy”. Problem zmax-height
nadal istnieje, ale jego działanie jest zmniejszone. Oznacza to, że możesz ustawić znacznie większą wysokość dla swojejmax-height
wartości i mniej się o nią martwić.Ogólna korzyść polega na tym, że po przejściu z powrotem (zwinięciu) użytkownik
translateY
natychmiast widzi animację, więc nie ma znaczenia, jak długomax-height
potrwa.Rozwiązanie jak skrzypce
źródło
translateY
ponadscale
bo mi się nie podoba, jakscale
dało taki efekt kompresji.Ok, więc myślę, że wymyśliłem super prostą odpowiedź ... nie
max-height
, używarelative
pozycjonowania, działa nali
elementach i jest czystym CSS. Nie testowałem w niczym innym niż Firefox, choć sądząc po CSS, powinien działać na wszystkich przeglądarkach.FIDDLE: http://jsfiddle.net/n5XfG/2596/
CSS
HTML
źródło
EDYCJA: Przewiń w dół, aby uzyskać zaktualizowaną odpowiedź
Robiłem listę rozwijaną i widziałem ten post ... wiele różnych odpowiedzi, ale postanawiam również udostępnić moją listę rozwijaną, ... To nie jest idealne, ale przynajmniej będzie używać tylko css dla upuścić! Używam transform: translateY (y), aby przekształcić listę do widoku ...
Możesz zobaczyć więcej w teście
http://jsfiddle.net/BVEpc/4/
Umieściłem div za każdym li, ponieważ mój rozwijana lista nadchodzi z góry i aby je odpowiednio pokazać, to było potrzebne, mój kod div to:
a najechanie to:
a ponieważ wysokość ul jest ustawiona na zawartość, którą może przeniknąć przez zawartość twojego ciała, dlatego zrobiłem to dla ul:
i najedź:
drugi raz po przejściu jest opóźnienie i zostanie ukryte po tym, jak moja lista rozwijana zostanie animacyjnie zamknięta ...
Mam nadzieję, że później ktoś skorzysta z tego.
EDYCJA: Po prostu nie mogę uwierzyć, że ppl faktycznie używa tego prototypu! to menu rozwijane jest tylko dla jednego podmenu i to wszystko !! Zaktualizowałem lepszy, który może mieć dwa podmenu dla kierunku ltr i rtl z obsługą IE 8.
Fiddle dla LTR
Fiddle dla RTL Mam
nadzieję, że ktoś uzna to za przydatne w przyszłości.
źródło
Możesz przejść z wysokości: 0 na wysokość: auto, pod warunkiem, że podasz również wysokość minimalną i maksymalną.
źródło
Rozwiązanie Flexbox
Plusy:
Cons:
Sposób działania polega na tym, że zawsze ma flex-base: auto na elemencie z zawartością, a zamiast tego przenosi flex-grow i flex-shrink.
Edycja: Ulepszony JS Fiddle inspirowany interfejsem Xbox One.
JS Fiddle
źródło
Rozwijając odpowiedź @ jake, przejście przejdzie do wartości maksymalnej wysokości, powodując niezwykle szybką animację - jeśli ustawisz przejścia dla obu: najechania myszką i wyłączenia, możesz nieco bardziej kontrolować szaloną prędkość.
Tak więc li: hover ma miejsce, gdy mysz wchodzi w stan, a następnie przejściem do właściwości niehoversowanej będzie pozostawienie myszy.
Mam nadzieję, że będzie to pomocne.
na przykład:
Oto skrzypce: http://jsfiddle.net/BukwJ/
źródło
Myślę, że wymyśliłem naprawdę solidne rozwiązanie
OK! Wiem, że ten problem jest tak stary jak Internet, ale myślę, że mam rozwiązanie, które zmieniłem w wtyczkę o nazwie mutant-przejście . Moje rozwiązanie ustawia
style=""
atrybuty śledzonych elementów za każdym razem, gdy następuje zmiana w DOM. efekt końcowy jest taki, że możesz używać dobrego ole CSS do swoich przejść i nie używać hacky poprawek lub specjalnego javascript. Jedyne, co musisz zrobić, to ustawić za pomocą tego, co chcesz śledzić na danym elemenciedata-mutant-attributes="X"
.Otóż to! To rozwiązanie wykorzystuje MutationObserver do śledzenia zmian w DOM. Z tego powodu tak naprawdę nie musisz niczego konfigurować ani używać javascript do ręcznej animacji. Zmiany są śledzone automatycznie. Ponieważ jednak używa MutationObserver, nastąpi to tylko w IE11 +.
Skrzypce!
height: auto
naheight: 100%
height: auto
podczas dodawania dzieciźródło
Oto sposób na przejście z dowolnej wysokości początkowej, w tym 0, na automatyczną (pełny rozmiar i elastyczny) bez konieczności ustawiania kodu dla poszczególnych węzłów lub dowolnego kodu użytkownika do inicjowania: https://github.com/csuwildcat / transit-auto . To jest w zasadzie święty graal tego, czego chcesz, wierzę -> http://codepen.io/csuwldcat/pen/kwsdF . Wystarczy uderzyć następujący plik JS na swoją stronę, a wszystko, co musisz zrobić, to dodać / usunąć pojedynczy atrybut logiczny -
reveal=""
- z węzłów, które chcesz rozwinąć i skurczyć.Oto wszystko, co musisz zrobić jako użytkownik, po dołączeniu bloku kodu znajdującego się poniżej przykładowego kodu:
Oto blok kodu, który należy umieścić na stronie, a potem wszystko jest sos:
Upuść ten plik JS na swojej stronie - wszystko to po prostu działa
/ * Kod wysokości: auto; przejście * /
/ * Kod dla DEMO * /
źródło
clip
jako wyzwalacza właściwości manekina iz jakiegoś powodu IE przestał pozwalać na animację klipu. Przełączyłem się na nieprzezroczystość i wszystko znowu działa: codepen.io/csuwldcat/pen/FpzGa . Zaktualizowałem kod w odpowiedzi, aby pasował.Odpowiedź Jake'a na animację maksymalnej wysokości jest świetna, ale stwierdziłem, że opóźnienie spowodowane ustawieniem dużej maksymalnej wysokości jest denerwujące.
Można przenieść składaną zawartość do wewnętrznego div i obliczyć maksymalną wysokość, uzyskując wysokość wewnętrznego div (poprzez JQuery będzie to outerHeight ()).
Oto link jsfiddle: http://jsfiddle.net/pbatey/duZpT
Oto jsfiddle z absolutnie minimalną wymaganą ilością kodu: http://jsfiddle.net/8ncjjxh8/
źródło
Wiem, że ten wątek się starzeje, ale w niektórych wyszukiwaniach Google zajmuje wysoką pozycję, więc uważam, że warto go zaktualizować.
Możesz także pobrać / ustawić własną wysokość elementu:
Powinieneś zrzucić ten Javascript zaraz po tagu zamykającym target_box w wewnętrznym tagu skryptowym.
źródło
Byłem w stanie to zrobić. Mam
.child
& A.parent
div. Dzielenie dziecka idealnie pasuje do szerokości / wysokości rodzica zabsolute
pozycjonowaniem. Następnie animujętranslate
właściwość, aby obniżyć jejY
wartość100%
. Jego bardzo płynna animacja, bez wad i wad, jak każde inne rozwiązanie tutaj.Coś w tym rodzaju, pseudo kod
Byłoby podasz
height
na.parent
, wpx
,%
lub pozostawić jakoauto
. Ten div następnie maskuje.child
div, gdy zsunie się.źródło
Wysłałem odpowiedź z JavaScriptem i przegłosowałem, więc zirytowałem się i spróbowałem ponownie, i złamałem ją tylko za pomocą CSS!
To rozwiązanie wykorzystuje kilka „technik”:
padding-bottom:100%
„hack”, w którym wartości procentowe są zdefiniowane w kategoriach bieżącej szerokości elementu. Więcej informacji na temat tej techniki.Rezultatem jest to, że uzyskujemy wydajne przejścia tylko przy użyciu CSS i jedną funkcję przejścia, aby płynnie osiągnąć przejście; Święty Gral!
Oczywiście, ma to wadę! Nie mogę wymyślić, jak kontrolować szerokość odcinania zawartości (
overflow:hidden
); ze względu na hack z wyściółką szerokość i wysokość są ściśle powiązane. Może być jednak jakiś sposób, więc wrócę do tego.https://jsfiddle.net/EoghanM/n1rp3zb4/28/
źródło
input[type="checkbox"]:checked
zamiast zamiast,:hover
jeśli chcesz (tzn. Nie chcesz używać JavaScript do dodawania żadnych klas)Oto rozwiązanie, którego właśnie użyłem w połączeniu z jQuery. Działa to dla następującej struktury HTML:
i funkcja:
Następnie można użyć funkcji kliknięcia, aby ustawić i usunąć wysokość za pomocą
css()
CSS:
źródło
Ja niedawno przejście
max-height
nali
elementy zamiast owijaniaul
.Rozumowanie to, że opóźnienie dla małych
max-heights
jest znacznie mniej zauważalny (jeśli w ogóle) w porównaniu do dużychmax-heights
, i mogę też ustawić mojemax-height
wartości względemfont-size
zli
aniżeli jakiejś arbitralnej ogromnej liczby za pomocąems
lubrems
.Jeśli mój rozmiar czcionki to
1rem
, ustawięmax-height
na coś podobnego3rem
(w celu dostosowania owiniętego tekstu). Możesz zobaczyć przykład tutaj:http://codepen.io/mindfullsilence/pen/DtzjE
źródło
Nie przeczytałem wszystkiego szczegółowo, ale ostatnio miałem ten problem i zrobiłem, co następuje:
Dzięki temu możesz mieć div, który na początku pokazuje zawartość do wysokości 200 pikseli, a po najechaniu myszą jego rozmiar staje się co najmniej tak wysoki, jak cała zawartość div. Div nie staje się 3000 pikseli, ale 3000 pikseli to limit, który narzucam. Upewnij się, że masz przejście na non: hover, w przeciwnym razie możesz uzyskać dziwne renderowanie. W ten sposób:: hover dziedziczy po non: hover.
Przejście nie działa z px na% lub na auto. Musisz użyć tej samej jednostki miary. To działa dobrze dla mnie. Korzystanie z HTML5 czyni go idealnym ....
Pamiętaj, że zawsze jest coś do obejrzenia ...; )
Mam nadzieję, że ktoś uzna to za przydatne
źródło
Rozwiązanie Jake dotyczące maksymalnej wysokości działa dobrze, jeśli podana na stałe wartość maksymalnej wysokości nie jest dużo większa niż rzeczywista wysokość (ponieważ w przeciwnym razie występują niepożądane opóźnienia i problemy z synchronizacją). Z drugiej strony, jeśli przypadkowo zakodowana wartość nie jest większa niż rzeczywista wysokość, element nie otworzy się całkowicie.
Poniższe rozwiązanie tylko CSS wymaga również zakodowanego rozmiaru, który powinien być większy niż większość występujących rzeczywistych rozmiarów. Jednak to rozwiązanie działa również, jeśli rzeczywisty rozmiar jest w niektórych sytuacjach większy niż rozmiar zakodowany na stałe. W takim przypadku przejście może nieco przeskoczyć, ale nigdy nie pozostawi częściowo widocznego elementu. To rozwiązanie może być również wykorzystane w przypadku nieznanej treści, np. Z bazy danych, w której po prostu wiesz, że zawartość zwykle nie jest większa niż x pikseli, ale są wyjątki.
Ideą jest użycie wartości ujemnej dla marginesu na dole (lub marginesu na górze dla nieco innej animacji) i umieszczenie elementu treści w środkowym elemencie z przepełnieniem: ukrytym. Ujemny margines elementu treści zmniejsza wysokość środkowego elementu.
Poniższy kod używa przejścia na marginesie od -150px do 0px. To samo działa dobrze, o ile element zawartości nie jest większy niż 150 pikseli. Ponadto wykorzystuje przejście na maksymalnej wysokości dla środkowego elementu od 0px do 100%. To w końcu ukrywa środkowy element, jeśli element zawartości jest większy niż 150 pikseli. W przypadku maksymalnej wysokości przejście służy jedynie do opóźnienia jego zastosowania o sekundę podczas zamykania, a nie do uzyskania płynnego efektu wizualnego (a zatem może działać w zakresie od 0px do 100%).
CSS:
HTML:
Wartość dolnego marginesu powinna być ujemna i jak najbliższa rzeczywistej wysokości elementu treści. Jeśli (wartość absoute) jest większa, występują podobne problemy z opóźnieniem i taktowaniem jak w rozwiązaniach o maksymalnej wysokości, które mogą być jednak ograniczone, o ile rozmiar zakodowany na sztywno nie jest znacznie większy niż rzeczywisty. Jeśli wartość bezwzględna marginesu dolnego jest mniejsza niż rzeczywista wysokość, tansition skacze nieco. W każdym razie po przejściu element treści jest albo w pełni wyświetlany, albo całkowicie usunięty.
Aby uzyskać więcej informacji, zobacz mój post na blogu http://www.taccgl.org/blog/css_transition_display.html#combined_height
źródło
Możesz to zrobić, tworząc odwrotną (zwiniętą) animację ze ścieżką przycinającą.
źródło
To nie jest dokładnie „rozwiązanie” problemu, ale raczej obejście. Działa tylko tak, jak napisano z tekstem, ale jestem pewien, że można go zmienić na inne elementy.
Oto przykład: http://codepen.io/overthemike/pen/wzjRKa
Zasadniczo ustawiasz rozmiar czcionki na 0 i przenosisz ją zamiast wysokości, maksymalnej wysokości lub skali Y () itd. W wystarczająco szybkim tempie, aby wysokość mogła przekształcić się w żądane ustawienie. Przekształcenie rzeczywistej wysokości za pomocą CSS na auto nie jest obecnie możliwe, ale transformacja zawartej w niej treści jest, stąd przejście do rozmiaru czcionki.
źródło