Chapter 3: Replicating jQuery's slideUp() and slideDown()

HTML

<script src="https://code.angularjs.org/1.3.2/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.2/angular-animate.min.js"></script>
<div ng-app="myApp">
    <div ng-controller="Ctrl">
        <button ng-click="displayToggle=!displayToggle">
            Toggle Visibility
        </button>
        <div class="container">
            <div class="slide-tile" ng-class="{'slide-up': !displayToggle}">
                Slide me up and down!
            </div>
        </div>
    </div>   
</div>

CSS

.container {
    overflow: hidden;
}
.slide-tile {
    transition:all 0.5s ease-in-out;
    width:300px;
    line-height:300px;
    text-align:center;
    border: 1px solid black;
    transform: translateY(0);
}
.slide-up {
    transform: translateY(-100%);
}

JavaScript

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