Angular 1.2 ng-enter-stagger动画不起作用

时间:2014-07-17 23:09:05

标签: angularjs animation

我一直使用http://www.yearofmoo.com/2013/12/staggering-animations-in-angularjs.html作为我的动画实现.ng-enter-stagger的参考指南,但它对我不起作用。我已经尝试重新排序我的代码,而不是使用SASS等。我发现的所有资源都表明我应该使用它作为指南(它只实现了大约4行实际的CSS):

 .repeat-animation.ng-enter-stagger,
 .repeat-animation.ng-leave-stagger,
 .repeat-animation.ng-move-stagger {
   /* notice how we're using animation instead of transition here */ 
   -webkit-animation-delay:0.2s;
   animation-delay:0.2s;

   /* yes we still need to do this too */
   -webkit-animation-duration:0;
   animation-duration:0;
}

下面是我的CSS和相关的ng-repeat我正在尝试执行动画。这段代码出了什么问题?

查看:

 <div class="gray-section repeat-animation" ng-repeat="customer in ctrl.filteredCustomers | paginate:ctrl.paginator"> 

SASS:

    .repeat-animation {

        &.ng-enter-stagger {
            transition-delay: 1s;
            -moz-transition-delay: 1s;
            -o-transition-delay: 1s;
            -webkit-transition-delay: 1s;

            transition-duration: 0 !important;
            -moz-transition-duration: 0 !important;
            -o-transition-duration: 0 !important;
            -webkit-transition-duration: 0 !important;
        }

        &.ng-enter {
            -webkit-transform: translate(0px, 100px);
            -moz-transform: translate(0px, 100px);
            -ms-transform: translate(0px, 100px);
            -o-transform: translate(0px, 100px);
            transform: translate(0px, 100px);
            opacity: 0;
        }

        &.ng-leave {
            &.ng-leave-active {
                display: none;
            }
        }
    }

全局app.js:

        apps.Global = angular.module('Global', [
            'ngAnimate',
          apps.CustomersPage.module.name,
          lfl.paginator.module.name
        ]);

        angular.bootstrap(document.body, [apps.Global.name]);

0 个答案:

没有答案