我试图在页面加载后获得一个带有一些文本的div容器,但是我失败了.我正在使用这样的ng-animate指令:
<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>
这显然不起作用,因为动画不会被点击或类似的东西触发.
那么如何告诉浏览器页面加载后,它应该淡入我的文本？
我希望你能帮帮我!
编辑:在我问的日期,我不知道动画也会在页面加载时触发.我一直认为必须有一些"用户交互",如点击或触发它们的东西.
如果您使用的是bootstrap,则可以执行以下操作:
<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>
它也可能以这种方式工作:
<body
ng-app="myApp"
ng-strict-di
ng-init="ngLoaded = true"
class="fade"
ng-class="{ in: ngLoaded }">
<div> Content </div>
</body>
该fade班有0不透明度和in类应用的过渡.ngLoaded一旦角度因为加载而变为真实(在$ rootScope中,我相信)ng-init="ngLoaded = true".
我使用这个,以便在页面加载时页面不会被一些尖括号括起来.
执行此操作的一种方法是使用标志（如$scope.fade = false;）来指示页面已加载。然后，在您的元素上，您可以使用ng-class带有条件的 an ，例如
class="animation" ng-class="{'fade-in': fade }"
实际的淡入淡出将由 CSS 处理。
.animation { opacity:0; transition:all 200ms ease-in-out; }
.animation.fade-in { opacity:1; }
在您的情况下，fade-in条件可能很简单，ng-class="{'fade-in': quote }"因为您导致该类应用的任何真值。
这是一个可供您使用的工作插件：http://plnkr.co/edit/ncqEB3PafIWbwv0UH1QG ?p=preview
| 归档时间： |
|
| 查看次数： |
4671 次 |
| 最近记录： |