Add animation class to content with view when a condition is true


#1

I tried applying the animation on a condition using ng-class

<ion-view cache-view="false" name="OutletMenu" title="OutletMenu" ng-class="{'animated slideInUp': applySlideUp === 'true'}" >
</ion-view>

but It does not work.

Try 2:
Also, I tried using

<ion-view cache-view="false" name="OutletMenu" title="OutletMenu" class="{ pageClass}" ng-view >

and in my controller, adding pageClass

$scope.pageClass='kitchenmenu'

and my css:

.kitchenmenu.ng-leave      {
  -webkit-animation:slideInDown 0.5s both ease-in;
  -moz-animation:slideInDown 0.5s both ease-in;
  animation: slideInDown 0.5s both ease-in;
}
.kitchenmenu.ng-enter    { 
  -webkit-animation:slideInUp 0.5s both ease-in;
  -moz-animation:slideInUp 0.5s both ease-in;
  animation:slideInUp 0.5s both ease-in;  
}

How do I get this working ?