How can I fade in and then fade out text inside a <div>

Question

My Web page has the following tag:

<div data-ng-model="modal.data.message"></div>

Is there a simple way using that I can make a message "autosaving" fade into view in the <div> and then fade out a couple of seconds after the function returns.

tasseKATT · Accepted Answer · 2013-10-26 14:51:58Z

Add the ngShow directive to your div:

<div ng-model="message" ng-show="showMessage" class="message fadein fadeout">{{message}}</div>

When saving begins set showMessage = true and the message you want to display. When saving is done set showMessage = false. To show the message a while longer after the saving is done you can use $timeout:

// Loadind done here - Show message for 3 more seconds. $timeout(function() { $scope.showMessage = false; }, 3000);

The animation part depends on what version of AngularJS you are using.

Here is an example using 1.2: http://plnkr.co/edit/jBukeP?p=preview

For sake of completeness, you should include the definition of your CSS classes in the answer as well.

Collectives™ on Stack Overflow

How can I fade in and then fade out text inside a <div>

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related