Search code examples
cssangularjsng-animate

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

Solution

  • 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