AngularJS css animação + retorno de chamada

Eu estou usando AngularJS e gostaria de ser notificado quando uma animação é feita. Eu sei que isso pode ser feito com animações definidas pelo javascript como myApp.animation(...) , mas estou curioso para saber se posso fazer isso sem o javascript.

Pergunta: É possível usar ng-enter angular e ng-leave css-transições e especificar um retorno de chamada concluído? Eu acho que o evento de animationend é triggersdo, então deve haver uma maneira de fazer isso.

Eu tenho isto:

HTML:

 
{{ item.name }}

CSS:

 .myDiv.ng-enter {...} .myDiv.ng-enter.ng-enter-active {...} .myDiv.ng-leave {...} .myDiv.ng-leave.ng-leave-active {...} 

E eu quero chamar myDone() quando a animação terminar (ou seja, depois que a class ng-enter-active for removida).

Sim, você pode, usando o serviço $animate , que normalmente seria feito em uma diretiva personalizada. Um caso simples de animação seria animar um elemento de alguma forma ao clicar. Digamos, por exemplo, remover um elemento no clique, com uma animação especificada usando .ng-leave, passando um retorno de chamada

 app.directive('leaveOnClick', function($animate) { return { scope: { 'leaveOnClick': '&' }, link: function (scope, element) { scope.leaveOnClick = scope.leaveOnClick || (function() {}); element.on('click', function() { scope.$apply(function() { $animate.leave(element, scope.leaveOnClick); }); }); } }; }); 

que poderia ser usado como:

 
Click to remove

Com CSS para diminuir o elemento:

 .my-div.ng-leave { opacity: 1; transition: opacity 1s; -webkit-transition: opacity 1s; } .my-div.ng-leave.ng-leave-active { opacity: 0; } 

Você pode ver a animação acima em ação neste Plunker .

No entanto, ngIf não tem ganchos para passar um retorno de chamada que eu conheço, então você terá que escrever sua própria diretiva. O que segue é uma descrição de uma versão modificada do ngIf , originalmente copiada da fonte ngIf , e renomeada para animatedIf . Pode ser usado por:

 
Some content

A maneira como funciona é que ele usa um observador manual para reagir às mudanças da expressão passada para o animated-if . As principais diferenças para o ngIf original são a adição de um parâmetro ‘scope’ para passar os retornos de chamada em:

 scope: { 'animatedIf': '=', 'animatedIfEnterCallback': '&', 'animatedIfLeaveCallback': '&' }, 

e depois modificando as chamadas para $animate.enter e $animate.leave para chamar esses callbacks após a animação:

 var callback = !oldValue && $scope.animatedIfEnterCallback ? $scope.animatedIfEnterCallback : (function() {}); $animate.enter(clone, $element.parent(), $element, callback); $animate.leave(block.clone, ($scope.animatedIfLeaveCallback || (function() {}))); 

A input é um pouco mais complicada para não chamar o retorno de chamada no carregamento inicial da diretiva. Por causa do parâmetro scope , essa diretiva cria um escopo isolado, que ele usa ao transcluir o conteúdo. Portanto, outra alteração necessária é criar e usar um escopo como filho a partir do escopo $parent da diretiva: a linha

  childScope = $scope.$new(); 

deve ser alterado para

  childScope = $scope.$parent.$new(); 

Você pode ver a fonte completa da diretiva ngIf modificada neste Plunker . Isso só foi testado extremamente brevemente.

Pode muito bem haver uma maneira mais simples de fazer isso, talvez não recriando totalmente a diretiva ngIf, mas criando uma diretiva com um modelo que use o ngIf original com alguns divs do wrapper, como

 template: '
'