How to slide up and slide down in AngularJS?

Question

I am trying to make a simple toggle example in AngularJS. I am facing one issue I need to show and hide with some animation like slide up and slide down. I have search button on header on click I show search div it is working in my plunker. My issue is to do animation...

Secondly I need to add z-index because it generates new layer. When I click search button "my name " come down when search bar is open. Why?

<ion-view>
<ion-header-bar align-title="" class="bar-positive">
  <div class="buttons">
  <i style="font-size:25px!important" class="icon-right ion-android-radio-button-off" ng-click="showsearch()"></i>

  </div>
  <h1 class="title">Title!</h1>
  <a class="button icon-right ion-chevron-right button-calm"></a>
</ion-header-bar>
<div class="list list-inset searchclass" ng-show="isdiplay">
  <label class="item item-input">
    <img src="https://dl.dropboxusercontent.com/s/n2s5u9eifp3y2rz/search_icon.png?dl=0">
    <input type="text" placeholder="Search">
  </label>
</div>
<ion-contend>
  <div style="margin-top:50px">
  my name
</div>
</ion-contend>

</ion-view>

Solution

When using Angular you still have the opportunity to use plain old CSS transitions. However, there are many ways to animate elements. In my solution here I use ng-class instead of ng-show. I toggle the class active when ever you click on the trigger. Finally the class changes the state of the element which results in the animation you would like to achieve.

You could simply change ng-show to ng-class="{'active':isdiplay}" and add the following CSS:

.searchclass {
  border: 1px solid red;
  margin: 0 !important;
  position: relative;
  top: 44px;
  z-index: 9999;
  -webkit-transition: height .3s ease-in-out;
  transition: all .3s ease-in-out;
  height: 0;
  opacity: 0;
}
.searchclass.active {
  height: 49px;
  opacity: 1;
}

You can however, as I said before, also use ng-show with the module ngAnimate which needs to be included in one of your own modules. This will enable animations out of the box, so that elements which can be animated get classes such as .ng-hide-remove, .ng-hide-add and .ng-hide-add-active etc. You could then style those classes on your own.

angular.module('ionicApp', ['ionic']).controller('MyController', function($scope) {
  $scope.isdiplay = false;
  $scope.showsearch = function() {
    $scope.isdiplay = !$scope.isdiplay;
  }
})

.searchclass {
  border: 1px solid red;
  margin: 0 !important;
  position: relative;
  top: 44px;
  z-index: 9999;
  -webkit-transition: height .3s ease-in-out;
  transition: all .3s ease-in-out;
  height: 0;
  opacity: 0;
}
.searchclass.active {
  height: 49px;
  opacity: 1;
}

<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet" />
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<div ng-app="ionicApp" ng-controller="MyController">
<ion-view>
  <ion-header-bar align-title="" class="bar-positive">
    <div class="buttons">
      <i style="font-size:25px!important" class="icon-right ion-android-radio-button-off" ng-click="showsearch()"></i>
    </div>
    <h1 class="title">Title!</h1>
    <a class="button icon-right ion-chevron-right button-calm"></a>
  </ion-header-bar>
  <div class="list list-inset searchclass" ng-class="{'active':isdiplay}">
    <label class="item item-input">
      <img src="https://dl.dropboxusercontent.com/s/n2s5u9eifp3y2rz/search_icon.png?dl=0">
      <input type="text" placeholder="Search">
    </label>
  </div>
  <ion-contend>
    <div style="margin-top:50px">
      my name
    </div>
  </ion-contend>
</ion-view>  
</div>