在加载AngularJS时淡入内容

Question

我有以下 angularjs 应用程序，它从 Instagram 加载内容，但是，在页面加载时，我想以平滑过渡淡入加载的内容。

我在主 HTML 标记中添加了{{ loadedClass }}，但加载时似乎没有将 ng-enter 放在其中：

HTML

  <script src="bower_components/angular/angular-animate.js"></script>
    <section ng-controller="ShowImages as images" class="page {{ loadedClass }}" ng-view>

CSS

.page.ng-leave {
  -webkit-animation: fadeOut 0.6s both ease-in;
  -moz-animation: fadeOut 0.6s both ease-in;
  animation: fadeOut 0.6s both ease-in;
}

/* line 697, ../sass/app.scss */
.page.ng-enter {
  -webkit-animation: fadeIn 2s both ease-in;
  -moz-animation: fadeIn 2s both ease-in;
  animation: fadeIn 2s both ease-in;
}

**控制器

    $scope.$on('$viewContentLoaded', function(){
                  $scope.loadedClass = 'page-feed';
          });**

 var app = angular.module('instafeed', ['ngAnimate']);
    app.filter('getFirstCommentFrom',function(){
  return function(arr, user){
    for(var i=0;i<arr.length;i++)
    {
      if(arr[i].from.username==user)
        return arr[i].text;
    }
    return '';
  }
})

我做错了什么？

http://machinas.com/wip/machinas/instagramfeed/

Answer 1

当 DOM 更新时，触发 enter 事件的指令会收到 .ng-enter 类。然后 Angular 添加了 ng-enter-active 类，它会触发动画。 ngAnimate 自动检测 CSS 代码以确定动画何时完成。事件完成后，Angular 会从 DOM 元素中删除这两个类，使我们能够为 DOM 元素定义动画属性。

要实际运行动画，您需要包含 CSS 动画定义。

<script src="js/vendor/angular-animate.js"></script>

最后，在引用 Angular 本身之后，您需要在 HTML 中引用这个库。

angular.module('myApp', ['ngAnimate']);

---

.fade-in {
  -webkit-transition: 2s linear all;
  transition: 2s linear all;
}
.fade-in.ng-enter {
  opacity: 0;
}
.fade-in.ng-enter.ng-enter-active {
  opacity: 1;
}
.fade-in.ng-leave {
  opacity: 1;
}
.fade-in.ng-leave.ng-leave-active {
  opacity: 0;
}

Answer 2

你可以添加css动画：

.fade-in {
  -webkit-transition: 2s linear all;
  transition: 2s linear all;
}
.fade-in.ng-enter {
  opacity: 0;
}
.fade-in.ng-enter.ng-enter-active {
  opacity: 1;
}
.fade-in.ng-leave {
  opacity: 1;
}
.fade-in.ng-leave.ng-leave-active {
  opacity: 0;
}

但为了使其正常工作，您还必须将 ngAnimate 模块包含到您的应用中：

angular.module('myApp', ['ngAnimate']);

另外不要忘记包含实际脚本（本示例使用 Bower，但还有其他方式）：

<script src="bower_components/angular-animate/angular-animate.js"></script>