Więcej
Użycie CSS dla efektu fade-in przy ładowaniu strony
Czy można użyć przejść CSS, aby pozwolić akapitowi tekstowemu na zanikanie podczas ładowania strony?
Bardzo podoba mi się jak to wyglądało na http://dotmailapp.com/ i chciałbym użyć podobnego efektu używając CSS. Domena została wykupiona i nie ma już wspomnianego efektu. Zarchiwizowaną kopię można obejrzeć na Wayback Machine.
Ilustracja
Mając ten znacznik:
<div id="test">
<p>This is a test</p>
</div>
Z następującą regułą CSS:
#test p {
opacity: 0;
margin-top: 25px;
font-size: 21px;
text-align: center;
-webkit-transition: opacity 2s ease-in;
-moz-transition: opacity 2s ease-in;
-o-transition: opacity 2s ease-in;
-ms-transition: opacity 2s ease-in;
transition: opacity 2s ease-in;
}
W jaki sposób można wywołać przejście przy ładowaniu?
411
3
Metoda 1:
Jeśli szukasz samonapędzającego się przejścia to powinieneś skorzystać z CSS 3 Animations. One również nie są'wspierane, ale jest to dokładnie ten rodzaj rzeczy, do której zostały stworzone.
CSS
Demo
Obsługa przeglądarek
Wszystkie nowoczesne przeglądarki i Internet Explorer 10 (i późniejsze): http://caniuse.com/#feat=css-animation
Metoda 2:
Alternatywnie można użyć jQuery (lub zwykłego JavaScriptu; patrz trzeci blok kodu) do zmiany klasy przy ładowaniu:
jQuery
CSS
Zwykły JavaScript (nie występuje w demo)
Demo
Obsługa przeglądarek
Wszystkie nowoczesne przeglądarki i Internet Explorer 10 (i późniejsze): http://caniuse.com/#feat=css-transitions
Metoda 3:
Możesz też skorzystać z metody, której używa .Mail:
jQuery
CSS
Demo
Obsługa przeglądarek
jQuery 1.x: Wszystkie nowoczesne przeglądarki oraz Internet Explorer 6 (i późniejsze): http://jquery.com/browser-support/
jQuery 2.x: Wszystkie nowoczesne przeglądarki i Internet Explorer 9 (i nowsze): http://jquery.com/browser-support/
Ta metoda jest najbardziej kompatybilna, ponieważ docelowa przeglądarka nie musi obsługiwać przejść CSS 3 lub animacji.
Możesz użyć atrybutu
onload=""
HTML i użyć JavaScript, aby dostosować styl nieprzezroczystości elementu.Pozostaw swój CSS tak jak zaproponowałeś. Edytuj swój kod HTML, aby:
To również działa, gdy cała strona jest ładowana:
HTML:
CSS:
Sprawdź na stronie W3Schools: przejścia oraz artykuł dotyczący zmiany stylów za pomocą JavaScript.
W odpowiedzi na pytanie @A.M.K'a o to, jak zrobić przejścia bez jQuery. Bardzo prosty przykład, który rzuciłem razem. Gdybym miał czas, aby przemyśleć to trochę bardziej, mógłbym być w stanie całkowicie wyeliminować kod JavaScript: