Animacja zmiany strony?

Question

Zmieniam zawartość elementów div (wygaszenie starych treści, a następnie zniknięcie nowych treści), a ponieważ różnią się nieco treścią, z chwilą ich zmiany następuje drastyczna reorganizacja wszystkiego poniżej.

Moje pytanie brzmi: czy istnieje sposób na sprawienie, aby ruch ten był płynny?

Podejrzewam, że jedynym możliwym sposobem, aby to zrobić, jest użycie javascript do określenia z wyprzedzeniem, jakie wysokości (w moim przypadku mam do czynienia tylko z blokami, w których przesunięcie w pionie) elementów początkowych i końcowych są i przypisz te wartości bezpośrednio. Kiedy to zrobię, jestem pewien, że przejście CSS3 zastosuje przyjemną animację.

Czy istnieje sposób na uzyskanie tego bez podania wyraźnych wymiarów? Wydaje mi się, że w pewnym momencie pamiętam, że przedmioty poruszały się po stronie w animowany sposób. Daje mi to nadzieję, że można to zrobić za pomocą samego CSS.

Answer 1

Zwykle tworzyłem tymczasowy (niewidoczny) element przechowujący nowe treści, aby obliczyć jego wysokość. Następnie oryginalny element może być animowany z aktualnej wysokości do nowo obliczonej wysokości.

Ważne jest, że tymczasowy element tworzony jest identyczne rodzeństwo oryginalnego elementu tak, że cała kaskada stylów i uzyskać niezbędne dziedziczone poprawnie (na przykład obliczenia nowej wysokości treść jest bezużyteczny, jeśli nie posiada poprawny font-size stosowane)

Podczas animacji różnych wysokościach określonymi wyraźnie (tj JS, jak to opisano powyżej), może być osiągnięte z CSS 3 (transition: height .5s ease;), nie będzie działać na różnych wysokościach określone pośrednio (tzn modyfikujących pierwiastka z height:auto)