CODEWITHSUNDEEP
cssangularjsng-animate
Simone
Simone

Reputation: 2430

ngAnimate in version 1.3.10 does not work

I am using the following instructions: ngAnimate Angularjs But something still does not works. I do not see any effect.

Here my code:

In the page I have the following script includes (both are for 1.3.10 version of angularjs):

<script type="text/javascript" src="/Scripts/angular.min.js"></script>
<script type="text/javascript" src="/Scripts/angular-animate.min.js"></script>
<script type="text/javascript" src="/Scripts/Angular/app.js"></script>

My app.js is the following:

(function (angular) { 
    var public_area =
        angular.module("public-area", ['ngResource', 'ngAnimate'])
        ...

The code of the page I aspect use animation is:

<p ng-show="my_condition" class="scale-animation">...</p>

And finally, the css is 

.scale-animation.enter, 
.scale-animation.leave { 
    -webkit-transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -moz-transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -ms-transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -o-transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    position:relative; display:block;
} 

.scale-animation-enter,
.scale-animation-leave.scale-animation-leave-active { 
    -webkit-transform:scaleY(0);
    -moz-transform:scaleY(0);
    -ms-transform:scaleY(0);
    -o-transform: scaleY(0);
    transform:scaleY(0); height:0; opacity:0;
}

.scale-animation-leave,
.scale-animation-enter.scale-animation-enter-active {
    -webkit-transform:scaleY(1);
    -moz-transform:scaleY(1);
    -ms-transform:scaleY(1);
    -o-transform: scaleY(1);
    transform:scaleY(1); height:30px; opacity:1;
}

The paragraph, appear and disappear correctly, but no animation is shown... What is strange to me is that I aspected to see the classes defined in css in the DOM (via Tools for developer in chrome) when the condition is verified or not.. but not classes is used...

What is wrong?

Following a simple PLUNKER:

https://plnkr.co/edit/atK7z5rWzDSEccB2HG0s?p=preview

Thank you

Upvotes: 0

Views: 48

Answers (2)

Simone
Simone

Reputation: 2430

I was using wrong css classes... Correct classes to use are

/* SCALE */
.scale-animation.ng-enter, 
.scale-animation.ng-leave { 
    -webkit-transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -moz-transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -ms-transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -o-transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    position:relative; display:block;
} 

.scale-animation.ng-enter,
.scale-animation.ng-leave.ng-leave-active { 
    -webkit-transform:scaleY(0);
    -moz-transform:scaleY(0);
    -ms-transform:scaleY(0);
    -o-transform: scaleY(0);
    transform:scaleY(0); 

    opacity:0;
}

.scale-animation.ng-leave,
.scale-animation.ng-enter.ng-enter-active {
    -webkit-transform:scaleY(1);
    -moz-transform:scaleY(1);
    -ms-transform:scaleY(1);
    -o-transform: scaleY(1);
    transform:scaleY(1); 

    opacity:1;
}

And I replaced 

ng-show

with 

ng-if

Upvotes: 0

charlietfl
charlietfl

Reputation: 171679

You need to have transition css set on original element class not on the enter/leave versions

This is how ngAnimate knows if it needs to manage element animations while rendering DOM.

Add rule 

.scale-animation{
  transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
}

And remove the transition from:

.scale-animation.enter, 
.scale-animation.leave{
   /* remove transition */
}

Upvotes: 1

Related Questions