Using Animation Module With Angularjs

Hi dear dudes & dudesses!
Today we gonna speak about angular animate module,
Yes, in case you didn't noticed , alongside with "controller", "directive" and "filter" angular recipes, exists another one - "animate".
You can use it by adding "ngAnimate" module to your modules:

angular.
  module('yourApp', [
    'ngAnimate',
    ...
  ]);

Until now I didn't have a chance to really use it in some of my projects, actually I have only read about what it suppose to do in great phonecat tutorial - the "first steps" tutorial that angular guys made for us.

Challenge

So current challenge is to try to animate the dropdown directive I have created in one of my old posts, in a way to will expand when open and collapse when closed.

Get Started

Since angular animations triggered when one of angular events enter, leave, add and move takes place - we need to modify our components in a way it will use ng-if directive which cuases enter and leave events to fire:
Instead of hide/show dropdown menu by adding and remove 'open' class on its parent I will make dropdowMmenu template to listen to its parent isOpen property...

angular.module('ui.components',['ngAnimate'])
.component('dropdown',{ 
  controller:function($element,$document,$animate, $timeout) {
     $element.addClass('dropdown');
     
     var menu = $element.find('dropdown-menu')[0];
   
     $document.on('click',(evt)=>{
        if(!$element.find('dropdown-toggle')[0].contains(evt.target)){
          this.close() 
        }
     })
 
    this.close=() => {
       $timeout(()=> this.isOpen = false,1); 

    }
    this.open=() => {
       $timeout(()=> this.isOpen = true,1);
    }    
  }
})
.component('dropdownToggle',{
  require: {
    parent: '^^dropdown' 
  },
  controller:function($element) {
    $element.addClass('dropdown-toggle');
    $element.on('click',($event)=>{
       this.parent.isOpen ? this.parent.close() : this.parent.open();
    })     
  }
}) 
.component('dropdownMenu',{
  require: {
    parent: '^^dropdown' 
  },
  transclude:true,
  template:'<div class="dropdown-menu" ng-if="$ctrl.parent.isOpen" ng-transclude></div>'//IMPORTANT: hide menu with ng-if directive
})

Important!
Since now we use ng-if to hide and show menu we must remove display:none rule from CSS of .dropdown-menu class.

Animation Module

The time for use animation recipe came.

.animation('.fold-animation', ['$animateCss', function($animateCss) {
  return {
    enter: function(element, doneFn) {
      var height = element[0].offsetHeight;
      return $animateCss(element, {
        from: { height:'0px' },
        to: { height:height + 'px' },
        duration:0.25
      });
    },
    leave: function(element, doneFn) {
      var height = element[0].offsetHeight;
      return $animateCss(element, {
        from: { height:height + 'px' },
        to: { height:'0px' },
        duration:0.25
      });
    }    
  }
}]);

I copied this code from this angular example with slight modifications
See full code on this plunker.
Also you can read more about angular animations in their accurate docs