Top element animation - ngShow/ngHide

Question

I wonder if anyone knows a method to animate the top element when using Angularjs ngShow/ngHide directives.

Explaining better: I have an encapsulating element, and within it two elements, one below the other. I want to show/hide the top one with animation, which I’ve already achieved. However, I’d like the rest to adjust gently, which I couldn’t do without some sort of gambit.

An example of what I mean is in Codepen: https://codepen.io/LeandroHermes/pen/qNpbbJ

Am I clear on the question? Does anyone know any way to do that?

Answer 1

It is possible yes. First you need to use the module ngAnimate, of own AngularJs.

//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 done, just set up an animation on CSS using the classes that this module manages. Whenever the ngShow exits from'not displayed 'to 'displayed', the ngAnimate adds some classes, such as ng-show-add, ng-show-active, etc. And the same occurs for the ngHide (the case of ngIf also follows the same logic, but with different class names).

With this, you can use a CSS sort of 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 much more than your css than the classes of ngAnimate themselves. They serve only as a parameter to know when the animation period started and when it ended.

• ng-hide-add: 0% Start process to hide. Visible widget
• ng-hide-add-active: 100% Finished the process of hiding the element. Hidden element
• ng-hide-remove: 0% Start process to display. Hidden element
• ng-hide-remove-active: 100% Finished the display process. Visible element

---

As I had not understood that you need to animate the parent element, here is a directive 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
            });
        }
    }
})

Recalling that this Directive needs to be present in all elements Child so that it can work.

Note: I did not test this way 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 event clique in the element Child if you need another method to trigger the event, just change how to start the directive.