<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Angular ngHide/ngShow</title>
 

  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
  

  
</head>
<body ng-app="ngAnimate">
  Göster/Gizle: <input type="checkbox" ng-model="secili">
  <br/>
  <br/>
<div>
  Göster:
  <div class="block animate-hide" ng-show="secili">
    ngShow aktif duruda
  </div>
</div>
  <br/>
<div>
  Gizle:
  <div class="block animate-hide" ng-hide="secili">
    ngHide aktif duruda
  </div>
</div>
</body>
</html>
.animate-hide {
  transition: all linear 0.5s;
  line-height: 20px;
  opacity: 1;
  padding: 10px;
  border: 1px solid black;
  background: white;
}

.animate-hide.ng-hide {
  line-height: 0;
  opacity: 0;
  padding: 0 10px;
}

.block {
  padding: 10px;
  width: 350px;
  border: 1px solid black;
  background: orange;
  border-radius: 10px;
  margin-top: 20px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.