CODEWITHSUNDEEP
javascriptangularjsanimationgsap
tom10271
tom10271

Reputation: 4647

How to use ng-animate to set a JS animation for ng-view?

Can do something like:

<section ng-view ng-animate="{enter: 'showExpand', leave: 'showExpand'}" id="mainContent">
</section>

while showExpand is animation in JS:

angular.animation(".showExpand", function () {
        return {
            enter: function(element, done){
                TweenMax.to(element, .8, {opacity: 1, top: '35pt'});
                done();
            },
            leave: function(element, done){
                TweenMax.to(element, .8, {opacity: 0, top: '-45pt'});
                done();
            },
            addClass: function (element, className) {
                TweenMax.to(element, .4, {opacity: 1, top: '35pt'});
            },
            removeClass: function (element, className) {
                TweenMax.to(element, .4, {opacity: 0, top: '-45pt'});
            }
        }
    };
);

I have tried:

 ng-animate="{enter: 'showExpand', leave: 'showExpand'}"
    ng-animate="{enter: 'show-expand', leave: 'show-expand'}"
    ng-animate="{enter: '.showExpand', leave: '.showExpand'}"
    ng-animate="{enter: '.show-expand', leave: '.show-expand'}"

And I cannot find anything for this problem

Upvotes: 1

Views: 556

Answers (2)

Ramesh Rajendran
Ramesh Rajendran

Reputation: 38683

I think this may a angular version problem

Please see this sample :

http://www.nganimate.org/

Upvotes: 0

kartikluke
kartikluke

Reputation: 2405

Look up the new docs for ngAnimate from Angular 1.2 onwards you no longer use the ng-animate tag.

And you need to add the class you defined. So it should be:

<section ng-view class="showExpand" id="mainContent"></section>

Upvotes: 1

Related Questions