Können CSS-Übergänge verwendet werden, damit ein Textabsatz beim Laden der Seite eingeblendet werden kann?
Mir gefällt sehr, wie es auf http://dotmailapp.com/ aussah, und ich würde gerne einen ähnlichen Effekt mit CSS verwenden. Die Domain wurde inzwischen gekauft und hat den genannten Effekt nicht mehr. Eine archivierte Kopie kann auf dem Wayback-Computer angezeigt werden .
Illustration
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 unter Last ausgelöst werden?
css
css-transitions
opacity
user1556266
quelle
quelle
Antworten:
Methode 1:
Wenn Sie nach einem selbstaufrufenden Übergang suchen, sollten Sie CSS 3-Animationen verwenden . Sie werden auch nicht unterstützt, aber genau dafür sind sie gemacht.
CSS
Demo
Browser-Unterstützung
Alle modernen Browser und Internet Explorer 10 (und höher): http://caniuse.com/#feat=css-animation
Methode 2:
Alternativ können Sie jQuery (oder einfaches JavaScript; siehe den dritten Codeblock) verwenden, um die Klasse beim Laden zu ändern:
jQuery
CSS
Einfaches JavaScript (nicht in der Demo)
Demo
Browser-Unterstützung
Alle modernen Browser und Internet Explorer 10 (und höher): http://caniuse.com/#feat=css-transitions
Methode 3:
Oder Sie können die von .Mail verwendete Methode verwenden:
jQuery
CSS
Demo
Browser-Unterstützung
jQuery 1.x : Alle modernen Browser und Internet Explorer 6 (und höher): http://jquery.com/browser-support/
jQuery 2.x : Alle modernen Browser und Internet Explorer 9 (und höher): http: // jquery.com/browser-support/
Diese Methode ist am besten kompatibel, da der Zielbrowser keine CSS 3-Übergänge oder -Animationen unterstützen muss.
quelle
opacity: 1 !important;
und ein<noscript>
Element eingefügt .$("#test p").addClass("load");
mehrmals anzuwenden ? Dies$("#test p").removeClass('load').addClass("load");
macht den Job nicht, da die Animation bereits gestoppt wurde. Kann ich einen Neustart über JavaScript auslösen?Sie können das
onload=""
HTML-Attribut und JavaScript verwenden, um den Deckkraftstil Ihres Elements anzupassen.Lassen Sie Ihr CSS wie vorgeschlagen. Bearbeiten Sie Ihren HTML-Code wie folgt:
Dies funktioniert auch, um die gesamte Seite nach dem Laden einzublenden:
HTML:
CSS:
Auf der W3Schools- Website finden Sie Übergänge und einen Artikel zum Ändern von Stilen mit JavaScript .
quelle
<div id="test" onload="this.style.opacity='1'">
. Ich bin mir nicht sicher, ob dies bedeutet, dass das Ereignis ausgelöst wird, bevor der gesamte Körper geladen wird.Als Antwort auf die Frage von @ AMK, wie Übergänge ohne jQuery durchgeführt werden können. Ein sehr einfaches Beispiel, das ich zusammengeschmissen habe. Wenn ich Zeit hätte, darüber nachzudenken, könnte ich möglicherweise den JavaScript-Code vollständig entfernen:
quelle