prodev prodev - 15 days ago 5
AngularJS Question

Hide Animation not working in Ionic

I am learning Ionic framework and I am trying to add show\hide fade animation to 'card' using CSS. I have defined 1-second duration transition animation but the target element simply disappears after 1 second of click the button without any animation.

here is my code

HTML

<ion-list class="card step-card" ng-show="s1">
<ion-item>Add some salt</ion-item>
<ion-item class="item-button-right">
&nbsp;
<button class="button" ng-click="showNextStep()">Next</button>
</ion-item>
</ion-list>


CSS

.step-card
{
transition: all linear 1s;
opacity: 1;
}
.step-card.ng-hide-add
{
opacity: 0;
}
.step-card.ng-hide-remove
{
opacity: 1;
}


JS

angular.module('starter', ['ionic', 'ngAnimate'])


> ionic info output

******************************************************
Dependency warning - for the CLI to run correctly,
it is highly recommended to install/upgrade the following:

Please install your Cordova CLI to version >=4.2.0 `npm install -g cordova`
Install ios-sim to deploy iOS applications.`npm install -g ios-sim` (may require sudo)
Install ios-deploy to deploy iOS applications to devices. `npm install -g ios-deploy` (may require sudo)

******************************************************

Your system information:

Cordova CLI: Not installed
Ionic CLI Version: 2.1.8
Ionic App Lib Version: 2.1.4
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v7.1.0
Xcode version: Not installed


******************************************************
Dependency warning - for the CLI to run correctly,
it is highly recommended to install/upgrade the following:

Please install your Cordova CLI to version >=4.2.0 `npm install -g cordova`
Install ios-sim to deploy iOS applications.`npm install -g ios-sim` (may require sudo)
Install ios-deploy to deploy iOS applications to devices. `npm install -g ios-deploy` (may require sudo)

******************************************************


Please help me fix the problem.
Thanks in advance!!!

Answer

Animation usually works in Ionic. However in my case it was not working because I was trying to animate an <ion-list> element using ng-show attribute.

<ion-list class="card step-card" ng-show="s1">
      <ion-item>Add some salt</ion-item>
      <ion-item class="item-button-right">
        &nbsp;
        <button class="button" ng-click="showNextStep()">Next</button>
      </ion-item>
</ion-list>

I do not know exact reason but I cannot make it animate. So, I found another way and then it works perfectly. I changed above code to something like this:

<div class="step-card" ng-show="s1">
    <ion-list class="card">
      <ion-item>Add some salt</ion-item>
      <ion-item class="item-button-right">
        &nbsp;
        <button class="button" ng-click="showNextStep()">Next</button>
      </ion-item>
    </ion-list>
</div>

As you can see, instead of animating <ion-list>, I encapsulated it in a <div> and now I am animating the <div> using ng-show attribute. (Now, you can use .ng-hide-add .ng-hide-remove in CSS to animate. Or, famous animate.css file for awesome animations)

Also, as pointed out by OClyde there was no need to explicitly include ngAnimate as dependency. Its already included in Ionic.

An advice: If you are trying to learn animation in Ionic first try them on simple html elements like <div> <span> etc before jumping to Ionic specific tags like <ion-list>.

For a simple animation working example you could refer OClyde answer.

Comments