如何淡入然后淡出中的文本[英]How can I fade in and then fade out text inside a 本文翻译自 Samantha J T Star 查看原文 2013-10-26 10359 angularjs

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.

有没有一种简单的方法使用我可以使消息“autosaving”淡入视图中的

,然后在函数返回后淡出几秒钟。

1 个解决方案

#1

Add the ngShow directive to your div:

将ngShow指令添加到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:

保存开始时,设置showMessage = true并显示要显示的消息。保存完成后,设置showMessage = false。要在保存完成后显示消息一段时间,您可以使用$ 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.

动画部分取决于您使用的AngularJS版本。

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

以下是使用1.2的示例:http://plnkr.co/edit/jBukeP?p = preview

#1