AngularJSのngAnimateのngShowのサンプル

<div ng-app="app" ng-controller="Ctrl">
  <button ng-click="toggle()">表示・非表示</button>
  <div class="box" ng-show="flag"></div>
</div>

var app = angular.module("app", ["ngAnimate"]);
app.controller('Ctrl', function ($scope) {
  $scope.flag = true;
  $scope.toggle = function() {
    $scope.flag = !$scope.flag;
  };
});

.box {
  width: 50px;
  height: 50px;
  margin-top: 10px;
  background: #C00;
}

/* 非表示開始 */
.ng-hide-add {
  transition: 1s;
  opacity: 1;
}

/* 非表示終了 */
.ng-hide-add-active {
  opacity: 0;
}

/* 表示開始 */
.ng-hide-remove {
  transition: 1s;
  opacity: 0;
}

/* 表示終了 */
.ng-hide-remove-active {
  opacity: 1;
}