Können CSS-Übergänge verwendet werden, damit ein Textabsatz beim Laden der Seite eingeblendet wird?
Mir gefällt der Effekt auf http://dotmailapp.com/ sehr gut und ich würde gerne einen ähnlichen Effekt mit CSS verwenden. Die Domain wurde inzwischen gekauft und verfügt nicht mehr über den genannten Effekt. Eine archivierte Kopie kann auf der Wayback Machine eingesehen werden.
Mit diesem Markup:
<div id="test">
<p>This is a test</p>
</div>
Mit der folgenden CSS-Regel:
#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;
}
Wie kann der Übergang beim Laden ausgelöst werden?
Wenn Sie auf der Suche nach einem selbsterklärenden Übergang sind, sollten Sie CSS 3 Animationen verwenden. Sie werden zwar auch nicht unterstützt, aber genau dafür wurden sie entwickelt.
#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; }
}
Alle modernen Browser und Internet Explorer 10 (und höher): http://caniuse.com/#feat=css-animation
Alternativ können Sie jQuery (oder einfaches JavaScript; siehe den dritten Codeblock) verwenden, um die Klasse beim Laden zu ändern:
$("#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";
Alle modernen Browser und Internet Explorer 10 (und höher): http://caniuse.com/#feat=css-transitions
Oder Sie können die Methode verwenden, die .Mail verwendet:
$("#test p").delay(1000).animate({ opacity: 1 }, 700);
#test p {
opacity: 0;
font-size: 21px;
margin-top: 25px;
text-align: center;
}
jQuery 1.x: Alle modernen Browser und Internet Explorer 6 (und später): http://jquery.com/browser-support/
jQuery 2.x: Alle modernen Browser und Internet Explorer 9 (und später): http://jquery.com/browser-support/
Diese Methode ist am kompatibelsten, da der Zielbrowser keine CSS 3 Übergänge oder Animationen unterstützen muss.
Sie können das HTML-Attribut "onload=""` verwenden und mit JavaScript die Deckkraft Ihres Elements anpassen.
Belassen Sie Ihr CSS so, wie Sie es vorgeschlagen haben. Ändern Sie Ihren HTML-Code entsprechend:
<body onload="document.getElementById(test).style.opacity='1'">
<div id="test">
<p>This is a test</p>
</div>
</body>
Dies funktioniert auch, um die komplette Seite nach dem Laden einzublenden:
HTML:
<body onload="document.body.style.opacity='1'">
</body>
CSS:
body{
opacity: 0;
transition: opacity 2s;
-webkit-transition: opacity 2s; /* Safari */
}
Besuchen Sie die W3Schools Website: Übergänge und einen Artikel über Stiländerungen mit JavaScript.
Als Antwort auf @A.M.K's Frage, wie man Übergänge ohne jQuery zu tun. Ein sehr einfaches Beispiel, das ich zusammengewürfelt habe. Wenn ich Zeit hatte, dies durch einige mehr zu denken, könnte ich in der Lage sein, den JavaScript-Code ganz zu beseitigen:
<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>