анимация углового списка при нажатии на объект

Привет нужна ваша помощь с 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>

моя директива: (link function) — слушайте изменения в данных, если есть изменения, то нужно добавить в список

   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);
         }

      });
    • Я пытаюсь добавить анимацию загрузчика, пока толчок не закончится
      у меня есть код jquery с animate (), но как и куда я его положил, чтобы показать загрузчик, пока список не будет обновляться

      1. пытался использовать ng-animate для ввода нового списка, но это не работает
        С class= «animate», зависимостями модулей и css
        он все еще показывает элемент в списке после нажатия без анимации

btw анимация на простой кнопке работает


тнх

1 ответ

    1. Включить angular-animate [- min].js.
    2. Сделайте так, чтобы ваш модуль зависел от ngAnimate.
    3. Определите свои переходы в CSS с помощью классов like .ng-enter and .ng-enter-active.
    4. Используйте ng-repeat как обычно.

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