У меня есть элемент, чья видимость переключается на ng-show. Я также использую анимации CSS - автоматические из ng-animate - для этого элемента, чтобы анимировать его запись.
Элемент будет содержать изображение или видео.
В том случае, если элемент содержит видео, я хочу воспроизвести его, но я не хочу воспроизводить видео до тех пор, пока он не закончит анимацию.
Как таковой, мне было интересно, есть ли простой способ привязать обратный вызов к концу анимации CSS в AngularJS?
docs ссылка doneCallback, но я не вижу способа ее указать...
Один обход (?), о котором я подумал, это $watch ing element.hasClass("ng-hide-add-active") и ожидающий его срабатывания с помощью (true, false), подразумевая, что он просто удален..
Есть ли лучший способ?
@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: Пример кода
Как предположил @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.
@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>