Wie blende ich einen Text ein, nachdem die Seite geladen wurde?

Ich versuche, einen Div-Container mit etwas Text zu bekommen, um nach dem Laden der Seite einzublenden, aber ich scheitere. Ich wurde mit der ng-belebten Richtlinie wie folgen aus:Wie blende ich einen Text ein, nachdem die Seite geladen wurde?

<div class="motd" style="text-align: center;" ng-init="quote = getQuote();"> 
    <div class="slide-fade" ng-class="animation"> 
     <span class="quote"><i>{{quote.content}}</i></span><br><br> 
     <span class="author">{{quote.author}}</span> 
    </div> 
</div>

die offensichtlich nicht funktioniert, aufgrund der Tatsache, dass die Animation nicht durch einen Klick oder etwas ähnliches ausgelöst bekommt.

Also wie sage ich dem Browser, dass nach dem Laden der Seite, sollte es in meinem Text verblassen?

Ich hoffe, Sie können mir helfen!

Bearbeiten: Zum Zeitpunkt, als ich fragte, wusste ich nicht, dass Animationen auch ausgelöst werden, wenn die Seite geladen wurde. Ich dachte immer, dass es eine "Benutzerinteraktion" wie einen Klick oder etwas geben muss, um sie auszulösen.

Quelle

2014-04-13 Fortuna

Eine Möglichkeit besteht darin, ein Flag (wie $scope.fade = false;) zu verwenden, um anzuzeigen, dass die Seite geladen wurde. Dann würden Sie auf Ihrem Element einen ng-class mit einem bedingten, z.

class="animation" ng-class="{'fade-in': fade }"

Die tatsächliche Fade würde von CSS behandelt werden.

.animation { opacity:0; transition:all 200ms ease-in-out; } 

.animation.fade-in { opacity:1; }

In Ihrem Fall der fade-in Zustand, da jeden truthy Wert als ng-class="{'fade-in': quote }" so einfach sein, könnten Sie die Klasse erhalten angewandt verursachen.

Hier ist eine Arbeits Plunker für Sie zu spielen, um: http://plnkr.co/edit/ncqEB3PafIWbwv0UH1QG?p=preview

Quelle

2014-04-13 18:32:08

Hey danke für deine Antwort. Ich denke, ich habe mich nicht klar gemacht: P Ich möchte nicht das Einblenden, ausgelöst durch einen Klick oder so ähnlich.Ich möchte die Ausführung direkt nach dem Laden der Seite automatisch durchführen lassen. – Fortuna

Es spielt keine Rolle, ob Sie ein Flag als Ergebnis eines Button-Klick oder als Ergebnis einer Server-Antwort in 'getQuote()' gesetzt haben. Wie gesagt, Sie können 'ng-class =" {'fade-in': quote} "' verwenden und sobald diese Variable auf einen Wert in Ihrem Bereich gesetzt ist, wird die Klasse angewendet. –

Wenn Sie Bootstrap verwenden, können Sie dies tun:

<html ng-app="myApp" ng-strict-di> 
<head>...</head> 
<body ng-init="ngLoaded = true" class="fade" ng-class="{ in: ngLoaded }"> 
    <div>Content</div> 
</body> 
</html>

Es kann auch so gut es auf diese Weise arbeiten, tun :

<body 
    ng-app="myApp" 
    ng-strict-di 
    ng-init="ngLoaded = true" 
    class="fade" 
    ng-class="{ in: ngLoaded }"> 
<div> Content </div> 
</body>

die fade Klasse 0 Opazität und die in Klasse wendet den Übergang. ngLoaded wird wahr (im $ rootScope, glaube ich), sobald eckig geladen wurde aufgrund ng-init="ngLoaded = true".

Ich benutze dies, so dass die Seite nicht mit Bits der eckigen Klammern und so während der Seite lädt.

Quelle

2015-03-26 04:48:48 CoolAJ86

Dies ist eine gute Antwort, wenn Sie auf eine Variable warten, die im Content-Div geladen werden soll, entfernen Sie 'ng-init =" ngLoaded = true "' und ändern Sie ng-class in 'ng-class =" {in: yourVariableHere} "' –

Ich sehe das Problem nicht. Sie möchten nur eine Animation haben, wenn das Element erscheint (Sie können darüber nachdenken, richtig?). Grundlegend was ich tun würde. würde ich dann animate.css http://daneden.github.io/animate.css/ und ich würde nur hinzufügen:

class="animated fadeIn"

oder einfache CSS mit dieser Animation. Was ich tun möchte, ist Verzögerung

.delayedx1{ 
    animation-delay: 0.2s !important; 
    -webkit-animation-delay: 0.2s !important; 
    -moz-animation-delay: 0.2s !important; 
    -o-animation-delay: 0.2s !important; 
    -webkit-transition-delay:0.2s; 
    transition-delay:0.2s; 
}

x2 x3 x4 oder in ng Wiederholungsverzögerung direkt in "Stil" zu verwenden $ Index basiert.

Quelle

2015-03-26 07:03:17 bunny1985

Wie blende ich einen Text ein, nachdem die Seite geladen wurde?

Antwort

Verwandte Themen