AngularJS Animation using CSS3 Transitions

First Page
<!DOCTYPE html>
<html>
   <style>
      div {
         transition: all linear 0.5s;
         background-color: yellow;
         height: 100px;
      }

      .ng-hide {
         height: 0;
      }
   </style>
   <script src = 
      "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
   </script>
   <script src = 
      "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.js">
   </script>
   <body ng-app="myApp">
      <h1>Hide the DIV: <input type="checkbox" ng-model="myCheck"></h1>
      <div ng-hide="myCheck"></div>
      <script>
         var app = angular.module('myApp', ['ngAnimate']);
      </script>
   </body>
</html>
Output

First Page