Yes, it is possible. First you need to use the ngAnimate module, from AngularJs itself.
//Load do arquivo
<script src="seu/caminho/angular-animate.min.js"></script>
//Injeção do módulo
angular.module(app, [
'ngAnimate',
//outros módulos
]);
Once you've done this, you just have to set up an animation in CSS using the classes that this module manages. Whenever ngShow exits from 'not displayed' to 'displayed', ngAnimate adds some classes, such as ng-show-add , ng-show-active , and so on. The same is true for ngHide (the ngIf case also follows the same logic, however with different class names).
With this, you can use CSS more or less like this:
.minhaClasse.ng-hide-add,
.minhaClasse.ng-hide-remove {
transition-duration: 400ms;
}
.minhaClasse.ng-hide-add {
opacity: 1;
}
.minhaClasse.ng-hide-add.ng-hide-add-active {
opacity: 0;
}
.minhaClasse.ng-hide-remove {
opacity: 0;
}
.minhaClasse.ng-hide-remove.ng-hide-remove-active {
opacity: 1;
}
Remembering that much of the effect and animations depend on your css much more than the actual% classes of%. They serve only as a parameter to know when it started and when the animation deadline ended.
-
ngAnimate : 0% Starts the process to hide. Visible element
-
ng-hide-add : 100% Finished the process of hiding the element. Hidden element
-
ng-hide-add-active : 0% Starts the process to display. Hidden element
-
ng-hide-remove : 100% Finished the display process. Visible element
Since you did not understand that you need to animate the parent element, here's a policy that can help you.
.directive('minhaDiretiva', function($timeout) {
return {
restrict: 'A',
link: function(scope, element) {
element.bind('click', function(e) {
var elParent = element.parent(); //Elemento pai
elParent.addClass('classe-animada'); //Adiciona a classe
$timeout(function() {
elParent.removeClass('classe-animada'); //Remove a classe
}, 1000); //Espera 1 segundo para remover a classe
});
}
}
})
Remembering that this directive must be present in all child elements in order for it to work.
Note: I have not tested this with classes, but I use it to manipulate attributes, which is almost the same logic.
Obs2 .: The addition and removal of the class are tied to the ng-hide-remove-active event in the child element if you need another method to trigger the event, just change how to start the policy.
/ p>
