Czy można używać animacji przejścia CSS3 przy ładowaniu strony bez użycia Javascript?
To jest coś, czego chcę, ale przy ładowaniu strony:
http://rilwis.googlecode.com/svn/trunk/demo/image-slider.html
Co znalazłem do tej pory
- CSS3 opóźnienie przejścia , sposób na opóźnienie efektów na elementach. Działa tylko po najechaniu myszą.
- Klatka kluczowa CSS3 działa przy obciążeniu, ale działa bardzo wolno. Z tego powodu nie jest użyteczny.
- Przejście CSS3 jest wystarczająco szybkie, ale nie animuje przy ładowaniu strony.
css
webkit
css-transitions
css-animations
Jens Törnell
źródło
źródło
Odpowiedzi:
Państwo może uruchomić CSS animację na stronie obciążenia bez użycia JavaScript; wystarczy użyć klatek kluczowych CSS3 .
Spójrzmy na przykład ...
Oto demonstracja menu nawigacyjnego przesuwającego się na miejsce za pomocą tylko CSS3 :
Rozbicie go...
Ważnymi częściami są animacja klatki kluczowej, którą nazywamy
slideInFromLeft
...... co w zasadzie mówi „na początku nagłówek będzie na całej szerokości poza lewą krawędzią ekranu, a na końcu będzie na swoim miejscu”.
Druga część nazywa tę
slideInFromLeft
animację:Powyżej jest wersja skrócona, ale tutaj jest pełna wersja dla przejrzystości:
Możesz robić różne ciekawe rzeczy, takie jak przesuwanie zawartości lub zwracanie uwagi na obszary.
Oto, co ma do powiedzenia W3C.
źródło
Niezbędne jest bardzo mało Javascript:
Teraz CSS:
Wiem, że pytanie brzmiało „bez Javascript”, ale myślę, że warto zauważyć, że istnieje proste rozwiązanie obejmujące jedną linię Javascript.
Może to być nawet wbudowany Javascript, coś takiego:
To wszystko, co jest potrzebne w JavaScript.
źródło
body
klas, użyj:document.body.classList.add('loaded)
document.body.className += " loaded";
się być nieco mniej gadatliwy za dodanie doloaded
klasy do istniejących klas.Wydaje mi się, że znalazłem sposób obejścia pytania dotyczącego OP - zamiast przejścia rozpoczynającego się na „obciążeniu” strony - stwierdziłem, że użycie animacji dla zaniku krycia ma ten sam efekt (szukałem to samo co OP).
Chciałem więc, aby treść ciała zmieniała kolor z białego (taki sam jak tło witryny) na czarny kolor tekstu przy ładowaniu strony - i pisałam tylko od poniedziałku, więc szukałam kodu rzeczy w stylu „on.load”, ale jeszcze nie znam JS - oto mój kod, który działał dla mnie dobrze.
I z jakiegokolwiek powodu, to nie działa
.class
tylko dla#id
(przynajmniej nie u mnie)Mam nadzieję, że to pomaga - jak wiem, ta strona bardzo mi pomaga!
źródło
Cóż, to trudne.
Odpowiedź brzmi „nie bardzo”.
CSS nie jest warstwą funkcjonalną. Nie ma świadomości tego, co się dzieje i kiedy. Służy po prostu do dodania warstwy prezentacyjnej do różnych „flag” (klas, identyfikatorów, stanów).
Domyślnie CSS / DOM nie zapewnia żadnego rodzaju stanu „wczytywania” do użycia przez CSS. Jeśli chciałbyś / mógłeś używać JavaScript, przydzielisz klasę
body
lub coś w celu aktywacji CSS.Biorąc to pod uwagę, możesz stworzyć hack do tego. Podam tutaj przykład, ale może on, ale nie musi dotyczyć twojej sytuacji.
Działamy przy założeniu, że „zamknięcie” jest „wystarczająco dobre”:
Oto fragment naszego arkusza stylów CSS:
Zakładamy również, że nowoczesne przeglądarki renderują progresywnie, więc nasz ostatni element będzie renderowany jako ostatni, więc ten CSS zostanie aktywowany na końcu.
źródło
Podobne do rozwiązania @ Rolf, ale pomiń odniesienie do funkcji zewnętrznych lub zabawy z klasą. Jeśli krycie ma pozostać ustalone na 1 po załadowaniu, wystarczy użyć wbudowanego skryptu, aby bezpośrednio zmienić krycie poprzez styl. Na przykład
gdzie sytle CSS „fadein” jest zdefiniowane dla @ Rolfa, definiuje przejście i ustawia krycie do stanu początkowego (tj. 0)
jedynym problemem jest to, że nie działa to z elementami SPAN lub DIV, ponieważ nie mają one działającego zdarzenia onload
źródło
zacznij od najechania myszką na ciało niż zacznie się, gdy mysz po raz pierwszy poruszy się na ekranie, co jest w większości w ciągu sekundy po przybyciu, problem polega na tym, że odwróci się po wyjściu z ekranu.
to najlepsza rzecz, o której mogę myśleć: http://jsfiddle.net/faVLX/
pełny ekran: http://jsfiddle.net/faVLX/embedded/result/
Edytuj patrz komentarze poniżej:
To nie będzie działać na żadnym urządzeniu z ekranem dotykowym, ponieważ nie ma najechania kursorem, więc użytkownik nie zobaczy treści, dopóki jej nie dotknie. - Rich Bradshaw
źródło
CSS tylko z opóźnieniem 3s
kilka punktów do zabrania tutaj:
Kod:
źródło
Ok udało mi się uzyskać animację, gdy strona ładuje się przy użyciu tylko przejść css (tak jakby!):
Utworzyłem 2 arkusze stylów css: pierwszym jest sposób, w jaki chcę styl HTML przed animacją ... a drugi to sposób, w jaki strona ma zajmować się animacją.
Nie do końca rozumiem, jak to osiągnąłem, ale działa to tylko wtedy, gdy dwa pliki css (oba w nagłówku mojego dokumentu) są oddzielone przez javascript w następujący sposób.
Przetestowałem to w przeglądarce Firefox, safari i operze. Czasami animacja działa, czasem przeskakuje bezpośrednio do drugiego pliku css, a czasami strona ładuje się, ale nic nie jest wyświetlane (może to tylko ja?)
Oto link do mojej strony w toku: http://www.hankins-design.co.uk/beta2/test/index.html
Może się mylę, ale myślałem, że przeglądarki, które nie obsługują przejścia css, nie powinny mieć żadnych problemów, ponieważ powinny przejść bezpośrednio do drugiego pliku css bez opóźnienia lub czasu trwania.
Chciałbym poznać opinie na temat tego, jak przyjazna dla wyszukiwarek jest ta metoda. Z moim czarnym kapeluszem przypuszczam, że mógłbym wypełnić stronę słowami kluczowymi i zastosować opóźnienie o 9999 sekund.
Byłbym zainteresowany dowiedzieć się, jak wyszukiwarki radzą sobie z atrybutem opóźnienia przejścia i czy przy użyciu powyższej metody będą nawet widzieć linki i informacje na stronie.
Co ważniejsze, naprawdę chciałbym wiedzieć, dlaczego nie jest to spójne przy każdym ładowaniu strony i jak mogę to naprawić!
Mam nadzieję, że może to wygenerować opinie i opinie, jeśli nic więcej!
źródło
Jeśli ktokolwiek miał problemy z zrobieniem dwóch przejść jednocześnie, oto co zrobiłem. Potrzebowałem tekstu przechodzącego od góry do dołu podczas ładowania strony.
HTML
HTML
CSS
Nie wiem, dlaczego próbowałem używać 2 deklaracji przejścia w 1 selektorze i (nie bardzo) sądzę, że użyje obu.
źródło
Jeszcze prostsze rozwiązanie (nadal z javascript [jeden wiersz w linii]):
Użyj tego jako tagu ciała: Zauważ, że
body.
lubthis.
nie działało dla mnie. Tylko długo;querySelector
zezwolić na użycieclassList.remove
(Linux Chromium)i dodaj ten wiersz do innych reguł css.
Zwróć uwagę, że może to mieć zastosowanie do krycia (zgodnie z żądaniem OP [innych plakatów]) po prostu przez użycie zamiast tego krycia jako wyzwalacza przejścia. (może nawet działać na dowolnej innej interpretacji css w ten sam sposób i możesz użyć wielu klas dla opóźnienia jawności między wyzwalaniem)
Logika jest taka sama. Wymuszaj brak transformacji (
:none !important
we wszystkich elementach podrzędnychbody.onload
i po załadowaniu dokumentu usuń klasę, aby wyzwolić wszystkie przejścia dla wszystkich elementów, jak określono w css.PIERWSZA ODPOWIEDŹ PONIŻEJ (PATRZ EDYCJA POWYŻEJ, ABY ODPOWIEDŹ KRÓTKA)
Oto odwrotne rozwiązanie:
Działa z wielokrotnym przejściem na wiele elementów. Nie próbowałem kompatybilności z różnymi przeglądarkami.
źródło
Nie bardzo, ponieważ CSS jest stosowany jak najszybciej, ale elementy mogą jeszcze nie zostać narysowane. Można zgadywać opóźnienie o 1 lub 2 sekundy, ale dla większości osób nie będzie to wyglądać dobrze, w zależności od szybkości Internetu.
Ponadto, jeśli chcesz na przykład coś zanikać, wymagałoby to CSS, który ukrywa dostarczaną treść. Jeśli użytkownik nie ma przejść CSS3, nigdy go nie zobaczy.
Polecam użycie jQuery (dla łatwości użytkowania + możesz dodać animację dla innych UA) i niektórych JS takich jak to:
Wraz z przejściami dodanymi w CSS. Ma to tę zaletę, że w razie potrzeby umożliwia łatwe korzystanie z animacji zamiast drugiego CSS w starszych przeglądarkach.
źródło
#id_to_fade in
, choć zgadzam się, to nie jest tak jasne z odpowiedzi.#id_to_fade_in { -webkit-transition:opacity 0.5s ease-in-out; }
+-o-
, także-moz-
prefiksy.