Question

我正在尝试在页面加载后获取带有一些文本的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>

这显然不起作用，因为动画不会被点击或类似的东西触发。

那么如何告诉浏览器在页面加载后，它应该淡入我的文本？

我希望你能帮助我！

编辑：在我提问的日期，我不知道动画也会在页面加载时触发。我一直认为必须有一些“用户互动”，比如点击或触发它们的东西。

Answer 1

如果你正在使用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而加载，ng-init="ngLoaded = true"就会变为真（在$ rootScope中，我相信）。

我使用这个，以便在页面加载时页面不会出现尖括号等部分。

Answer 2

我没有看到问题。你只想在元素出现时有动画（你可以这样思考吗？）。基本上我会做什么。我会用animate.css http://daneden.github.io/animate.css/ 我只想补充一下：

 class="animated fadeIn"

或者这个动画的普通css。我喜欢做的是使用延迟

.delayedx1{
    animation-delay: 0.2s !important;
    -webkit-animation-delay: 0.2s !important;
    -moz-animation-delay: 0.2s !important;
    -o-animation-delay: 0.2s !important;
    -webkit-transition-delay:0.2s;
    transition-delay:0.2s;
}

x2 x3 x4或ng重复延迟直接在“style”中基于$ index。

Answer 3

执行此操作的一种方法是使用标志（如$scope.fade = false;）来指示页面已加载。然后，在您的元素上，您使用带有条件的ng-class。

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

页面加载后如何淡入文本？

3 个答案: