Javascript Toggle Animation Of Height In Angular

I have the following animation defined in my Angular app for toggling the hight/opacity of an element. It works as expected, however I'm now using it to toggle a 'main menu' and th

Solution 1:

There were problems with all the 'Angular only' slide toggle methods I could find (mainly due to child element heights not being dealt with properly). In the end I included jQuery in the project and used the comprehensive slideUp and slideDown functionality from there like so:

myApp.animation('.slide', function () {
   return {
      beforeAddClass: function (element, className, done) {
         if (className === 'ng-hide') {
            element.slideUp({ duration: 350 }, done);
         }
      },
      removeClass: function (element, className, done) {
         if (className === 'ng-hide') {
            element.hide().slideDown({ duration: 350 }, done);
         }
      }
   }
});