Pot fi folosite tranzițiile CSS pentru a permite ca un paragraf de text să se estompeze la încărcarea paginii?
Îmi place foarte mult cum arată pe http://dotmailapp.com/ și mi-ar plăcea să folosesc un efect similar folosind CSS. Între timp, domeniul a fost cumpărat și nu mai are efectul menționat. O copie arhivată poate fi vizualizată pe Wayback Machine.
Având acest marcaj:
<div id="test">
<p>This is a test</p>
</div>
Cu următoarea regulă 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;
}
Cum poate fi declanșată tranziția la încărcare?
Dacă sunteți în căutarea unei tranziții auto-invocatoare, atunci ar trebui să folosiți CSS 3 Animations. Nici acestea nu sunt suportate, dar exact pentru acest tip de lucru au fost create.
#test p {
margin-top: 25px;
font-size: 21px;
text-align: center;
-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 2s; /* Firefox < 16 */
-ms-animation: fadein 2s; /* Internet Explorer */
-o-animation: fadein 2s; /* Opera < 12.1 */
animation: fadein 2s;
}
@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Firefox < 16 */
@-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Internet Explorer */
@-ms-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Opera < 12.1 */
@-o-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
Toate browserele moderne și Internet Explorer 10 (și mai târziu): http://caniuse.com/#feat=css-animation
Alternativ, puteți utiliza jQuery (sau JavaScript simplu; a se vedea al treilea bloc de cod) pentru a schimba clasa la încărcare:
$("#test p").addClass("load");
#test p {
opacity: 0;
font-size: 21px;
margin-top: 25px;
text-align: center;
-webkit-transition: opacity 2s ease-in;
-moz-transition: opacity 2s ease-in;
-ms-transition: opacity 2s ease-in;
-o-transition: opacity 2s ease-in;
transition: opacity 2s ease-in;
}
#test p.load {
opacity: 1;
}
document.getElementById("test").children[0].className += " load";
Toate browserele moderne și Internet Explorer 10 (și mai târziu): http://caniuse.com/#feat=css-transitions
Sau, puteți folosi metoda pe care o folosește .Mail:
$("#test p").delay(1000).animate({ opacity: 1 }, 700);
#test p {
opacity: 0;
font-size: 21px;
margin-top: 25px;
text-align: center;
}
jQuery 1.x: Toate browserele moderne și Internet Explorer 6 (și mai târziu): http://jquery.com/browser-support/
jQuery 2.x: Toate browserele moderne și Internet Explorer 9 (și versiuni ulterioare): http://jquery.com/browser-support/
Această metodă este cea mai compatibilă între browsere, deoarece browserul țintă nu trebuie să suporte tranzițiile sau animațiile CSS 3.
Puteți utiliza atributul HTML onload=""
și folosi JavaScript pentru a ajusta stilul de opacitate al elementului dumneavoastră.
Lăsați CSS-ul așa cum v-ați propus. Modificați codul HTML pentru a:
<body onload="document.getElementById(test).style.opacity='1'">
<div id="test">
<p>This is a test</p>
</div>
</body>
Acest lucru funcționează și pentru a face fade-in pe întreaga pagină la terminarea încărcării:
HTML:
<body onload="document.body.style.opacity='1'">
</body>
CSS:
body{
opacity: 0;
transition: opacity 2s;
-webkit-transition: opacity 2s; /* Safari */
}
Consultați site-ul W3Schools: tranziții și un articol pentru schimbarea stilurilor cu JavaScript.
Ca răspuns la întrebarea lui @A.M.K's despre cum se pot face tranziții fără jQuery. Un exemplu foarte simplu pe care l-am aruncat împreună. Dacă aș avea timp să mă gândesc mai mult la asta, aș putea să elimin cu totul codul JavaScript:
<style>
body {
background-color: red;
transition: background-color 2s ease-in;
}
</style>
<script>
window.onload = function() {
document.body.style.backgroundColor = '#00f';
}
</script>
<body>
<p>test</p>
</body>