Replicating jQuery's slideUp() and slideDown() methods

jQuery provides a very useful pair of animation methods, slideUp() and slideDown(), which use JavaScript in order to accomplish the desired results. With the animation hooks provided for you by AngularJS, these animations can be accomplished with CSS.

Getting ready

Suppose that you want to slide a <div> element up and down in the following setup:

(index.html)

<div ng-app="myApp">
  <div ng-controller="Ctrl">
    <button ng-click="displayToggle=!displayToggle">
      Toggle Visibility
    </button>
    <div>Slide me up and down!</div>
  </div>   
</div>

(app.js)
angular.module('myApp', ['ngAnimate'])
.controller('Ctrl', function($scope) {
  $scope.displayToggle = true;
});

How to do it…

A sliding animation requires truncation of the overflowing element and a transition involving the height of the element. The following implementation utilizes ng-class:

(style.css)

.container {
  overflow...