如何淡入然后淡出<div> </div>中的文本

时间:2013-10-26 14:01:43

标签: angularjs

我的网页包含以下标记:

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

是否有一种简单的方法可以使我在<div>中将消息“自动保存”淡入视图,然后在函数返回后淡出几秒钟。

1 个答案:

答案 0 :(得分:17)

ngShow指令添加到div:

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

保存开始时设置showMessage = true并显示您要显示的消息。保存完成后设置showMessage = false。要在保存完成后显示消息一段时间,您可以使用$timeout

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

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

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