推送到对象时动画角度列表答案

【问题标题】：animate angular list when push to object推送到对象时动画角度列表
【发布时间】：2017-05-31 06:48:03
【问题描述】：

您好，在 ng animate 方面需要您的帮助

我有这个指令模板：

<ul class="col-sm-10">
  <li  class="animate" ng-repeat="event in vm.dataList track by $index">
      <div class="active">
        <img class="overview" ng-src="{{event.data1}}">
        <div class="enterTime">{{event.data2}}</div>
      </div>
    </li>
</ul>

我的指令是：（链接功能） - 如果有变化则需要监听数据变化然后需要添加到列表中

   scope.$watch('data', function(newIsOpenVal, oldIsOpenVal){
         var newobj = {};

         if(newIsOpenVal != oldIsOpenVal)
         {
           newobj = scope.eventData;
           newobj.buttonStatus =  scope.buttonStatus;
           console.log(newobj);
           ctrl.dataList.unshift(newobj);
         }

      });

- 我正在尝试添加加载器动画，直到推送完成我有带有 animate() 的 jquery 代码，但是在更新列表之前，我如何以及在何处显示加载器
  1. 尝试使用 ng-animate 输入新列表，但这不起作用带有 class="animate" ，模块依赖和 css 在没有动画的情况下推送后它仍然显示列表中的项目

简单按钮上的btw动画正在工作
谢谢

【问题讨论】：

标签： angularjs animation ng-animate

【解决方案1】：

包括 angular-animate[-min].js。
让您的模块依赖于 ngAnimate。
使用 .ng-enter 和 .ng-enter-active 等类在 CSS 中定义过渡。
像往常一样使用 ng-repeat。

.animate.ng-enter { -webkit-transition: 1s; transition: 1s; opacity: 0; } .animate.ng-enter-active { opacity: 1; }

【讨论】：