Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to fade in a text after page loaded?

Tags:

angularjs

I'm trying to get a div container with some text to fade in after the page loaded, but I fail. I was using the ng-animate directive like this:

<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>

Which obviously does not work, due to the fact that the animation does not get triggered by a click or something like that.

So how do I tell the browser that after the page loaded, it should fade in my text?

I hope you can help me!

Edit: At the date where I asked, I did not know that animations will also trigger when the page has loaded. I always thought there have to be some "user interaction" like a click or something to trigger them.

like image 869
Fortuna Avatar asked Apr 13 '14 18:04

Fortuna


People also ask

How do you add a fade effect in HTML?

Use animation and transition property to create a fade-in effect on page load using CSS. Method 1: Using CSS animation property: A CSS animation is defined with 2 keyframes. One with the opacity set to 0, the other with the opacity set to 1.

How do you fade out in CSS?

The fade transition in CSS is a stylistic effect that lets elements such as background, image, or text gradually disappear or appear on a web page. To apply a fade-out effect on an element, you need to use either the animation or transition property in CSS.


1 Answers

If you're using bootstrap, you can do this:

<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>

It may also work do to it this way as well:

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

The fade class has 0 opacity and the in class applies the transition. ngLoaded will become true (in the $rootScope, I believe) as soon as angular has loaded due to ng-init="ngLoaded = true".

I use this so that the page doesn't blip with bits of angular brackets and such while the page loads.

like image 176
coolaj86 Avatar answered Nov 15 '22 06:11

coolaj86