As transições do CSS podem ser usadas para permitir que um parágrafo de texto seja carregado na página?
Gosto muito de como ficou http://dotmailapp.com/ e adoraria usar um efeito semelhante usando o CSS. O domínio já foi comprado e não tem mais o efeito mencionado. Uma cópia arquivada pode ser vista na Wayback Machine.
Ter esta marcação:
<div id="test">
<p>This is a test</p>
</div>
Com a seguinte regra do 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;
}
Como a transição pode ser desencadeada na carga?
Se você está procurando por uma transição auto-invasiva então você deve usar CSS 3 Animações. Elas também são't suportadas, mas este é exatamente o tipo de coisa para a qual elas foram feitas.
#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; }
}
Todos os navegadores modernos e Internet Explorer 10 (e posteriores): http://caniuse.com/#feat=css-animation
Alternativamente, você pode usar jQuery (ou JavaScript simples; veja o terceiro bloco de código) para alterar a classe na carga:
$("#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";
Todos os navegadores modernos e Internet Explorer 10 (e posteriores): http://caniuse.com/#feat=css-transitions
Ou, você pode usar o método que .Mail usa:
$("#test p").delay(1000).animate({ opacity: 1 }, 700);
#test p {
opacity: 0;
font-size: 21px;
margin-top: 25px;
text-align: center;
}
JQuery 1.x: Todos os navegadores modernos e Internet Explorer 6 (e posteriores): http://jquery.com/browser-support/
JQuery 2.x: Todos os navegadores modernos e Internet Explorer 9 (e posteriores): http://jquery.com/browser-support/
Este método é o mais compatível, pois o navegador de destino não precisa suportar CSS 3 transições ou animações.
Você pode utilizar o atributo onload=""
HTML e utilizar o JavaScript para ajustar o estilo de opacidade do seu elemento.
Deixe o seu CSS como você propôs. Edite o seu código HTML para:
<body onload="document.getElementById(test).style.opacity='1'">
<div id="test">
<p>This is a test</p>
</div>
</body>
Isto também funciona para desvanecimento - na página completa ao terminar o carregamento:
HTML:
<body onload="document.body.style.opacity='1'">
</body>
CSS:
body{
opacity: 0;
transition: opacity 2s;
-webkit-transition: opacity 2s; /* Safari */
}
Verifique o site W3Schools: transições e um artigo para mudar de estilo com JavaScript.
Em resposta à pergunta de @A.M.K's sobre como fazer transições sem jQuery. Um exemplo muito simples que eu joguei junto. Se eu tivesse tempo para pensar um pouco mais sobre isso, eu poderia ser capaz de eliminar completamente o código 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>