Запуск кода после анимации AngularJS завершен

У меня есть элемент, чья видимость переключается на ng-show. Я также использую анимации CSS - автоматические из ng-animate - для этого элемента, чтобы анимировать его запись.

Элемент будет содержать изображение или видео.

В том случае, если элемент содержит видео, я хочу воспроизвести его, но я не хочу воспроизводить видео до тех пор, пока он не закончит анимацию.

Как таковой, мне было интересно, есть ли простой способ привязать обратный вызов к концу анимации CSS в AngularJS?

docs ссылка doneCallback, но я не вижу способа ее указать...

Один обход (?), о котором я подумал, это $watch ing element.hasClass("ng-hide-add-active") и ожидающий его срабатывания с помощью (true, false), подразумевая, что он просто удален..

Есть ли лучший способ?

Ответ 1

@michael-charemza ответ работал отлично для меня. Если вы используете Angular 1.3, они немного изменили обещание. Я немного застрял в этом, но вот изменения, которые заставили его работать:

if (show) {
  $animate.removeClass(element, 'ng-hide').then(scope.afterShow);
}
if (!show) {
  $animate.addClass(element, 'ng-hide').then(scope.afterHide);
}

Plunker: Пример кода

Ответ 2

Как предположил @zeroflagL, может быть выбрана настраиваемая директива для замены ngShow. Вы можете использовать & для передачи обратных вызовов в директиву, которая может быть вызвана после завершения анимации. Для согласованности анимации выполняются добавлением и удалением класса ng-hide, который является тем же методом, который используется обычной директивой ngShow:

app.directive('myShow', function($animate) {
  return {
    scope: {
      'myShow': '=',
      'afterShow': '&',
      'afterHide': '&'
    },
    link: function(scope, element) {
      scope.$watch('myShow', function(show, oldShow) {
        if (show) {
          $animate.removeClass(element, 'ng-hide', scope.afterShow);
        }
        if (!show) {
          $animate.addClass(element, 'ng-hide', scope.afterHide);
        }
      });
    }
  }
})

Пример использования этого прослушивания для переменной области видимости show будет:

<div my-show="show" after-hide="afterHide()" after-show="afterShow()">...</div>

Поскольку это добавление/удаление класса ng-hide, точки об анимации из документов о ngShow остаются в силе, и вам нужно добавить display: block !important в CSS.

Вы можете увидеть пример этого в действии в этом Plunker.

Ответ 3

Решение

@michal-charemza отлично работает, но директива создает изолированную область видимости, поэтому в некоторых случаях она не может быть прямой заменой директивы ng-show по умолчанию.

Я немного изменил его, так что он не создает никаких новых областей и может быть взаимозаменяемым с директивой ng-show.

app.directive('myShow', function($animate) {
  return {
    link: function(scope, element, attrs) {
      scope.$watch(attrs['myShow'], function(show, oldShow) {
        if (show) {
          $animate.removeClass(element, 'ng-hide').then(function(){
            scope.$apply(attrs['myAfterShow']);
          });
        } else {
          $animate.addClass(element, 'ng-hide').then(function(){
            scope.$apply(attrs['myAfterHide']);
          });
        }
      });
    }
  }
})

Использование:

<div my-show="show" my-after-hide="afterHide()" my-after-show="afterShow()">...</div>

Plunker