Question

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

我将{{ loadedClass }}添加到主HTML标记中，但在加载时似乎没有将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>

在加载AngularJS时淡化内容

2 个答案: