chirayuk/index.css

## index.css
.myDiv {
  padding:10px;
  border:1px solid black;
  background:white;
  overflow: hidden;
}

.myDiv.ng-hide-add.ng-hide-add-active,
.myDiv.ng-hide-remove {
  opacity: 0;
  height: 0px;
}

.myDiv.ng-hide-add,
.myDiv.ng-hide-remove.ng-hide-remove-active {
  opacity: 1;
  height:4em;
}

.myDiv.ng-hide-add,
.myDiv.ng-hide-remove {
  -webkit-transition: 218ms linear all;
  -moz-transition: 218ms linear all;
  -o-transition: 218ms linear all;
  transition: 218ms linear all;
  display:block!important;
}

.fadeIn-setup, .fadeOut-setup.fadeOut-start {
  opacity:0;
}
.fadeOut-setup, .fadeIn-setup.fadeIn-start {
  opacity: 1;
}

## index.html
<!DOCTYPE html>

<!-- Based on: http://jsfiddle.net/Kx4TS/185/ -->

<html>
<head>
    <title>AngularJS Animation: ng-show example</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="Description" content="AngularJS Animation: ng-show example">
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.10/angular.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.10/angular-animate.js"></script>
    <script src="index.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" href="index.css" type="text/css" charset="utf-8">
</head>
<body>

  <div ng-app="ngAnimate">
       <div ng-controller='ctrl'>
          <input type='button' value='click' ng-click='clicked()' />
          <div ng-show="foo == true" class='myDiv'>
       <table>
           <tr><td>1</td></tr>
           <tr><td>2</td></tr>
           <tr><td>3</td></tr>
           <tr><td>4</td></tr>
           <tr><td>5</td></tr>
              </table>
          </div>
           <div>
           HELLO WORLD
           </div>
      </div>
  </div>

</body>
</html>

## index.js
// Based on: http://jsfiddle.net/Kx4TS/185/


function ctrl($scope){
    $scope.foo = false;
    $scope.clicked = function(){
       $scope.foo = !($scope.foo);
    }
}
	.myDiv {
	padding:10px;
	border:1px solid black;
	background:white;
	overflow: hidden;
	}

	.myDiv.ng-hide-add.ng-hide-add-active,
	.myDiv.ng-hide-remove {
	opacity: 0;
	height: 0px;
	}

	.myDiv.ng-hide-add,
	.myDiv.ng-hide-remove.ng-hide-remove-active {
	opacity: 1;
	height:4em;
	}

	.myDiv.ng-hide-add,
	.myDiv.ng-hide-remove {
	-webkit-transition: 218ms linear all;
	-moz-transition: 218ms linear all;
	-o-transition: 218ms linear all;
	transition: 218ms linear all;
	display:block!important;
	}

	.fadeIn-setup, .fadeOut-setup.fadeOut-start {
	opacity:0;
	}
	.fadeOut-setup, .fadeIn-setup.fadeIn-start {
	opacity: 1;
	}
	<!DOCTYPE html>

	<!-- Based on: http://jsfiddle.net/Kx4TS/185/ -->

	<html>
	<head>
	<title>AngularJS Animation: ng-show example</title>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="Description" content="AngularJS Animation: ng-show example">
	<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.10/angular.min.js"></script>
	<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.10/angular-animate.js"></script>
	<script src="index.js" type="text/javascript" charset="utf-8"></script>
	<link rel="stylesheet" href="index.css" type="text/css" charset="utf-8">
	</head>
	<body>

	<div ng-app="ngAnimate">
	<div ng-controller='ctrl'>
	<input type='button' value='click' ng-click='clicked()' />
	<div ng-show="foo == true" class='myDiv'>
	<table>
	<tr><td>1</td></tr>
	<tr><td>2</td></tr>
	<tr><td>3</td></tr>
	<tr><td>4</td></tr>
	<tr><td>5</td></tr>
	</table>
	</div>
	<div>
	HELLO WORLD
	</div>
	</div>
	</div>

	</body>
	</html>
	// Based on: http://jsfiddle.net/Kx4TS/185/


	function ctrl($scope){
	$scope.foo = false;
	$scope.clicked = function(){
	$scope.foo = !($scope.foo);
	}
	}