CODEWITHSUNDEEP
angularjsanimation
totothegreat
totothegreat

Reputation: 1643

How can i wait for animation to end in angular.js

I'm using animate.css to do some animations on my site, but i want a certain animation to occur right after the other one ended, for example i have this css:

.pageRenderer.ng-enter{
    animation:  fadeIn 1s;
}

.pageRenderer.ng-leave{
    animation: bounceOutLeft 1s;
}

And this simple html:

 <div ng-repeat='page in pages' style='position:relative'>
                <div ng-if="$index == pageToShow" class='pageRenderer'>
                    <h2>{{page.title}}</h2>
                    <div ng-repeat='quest in page.quests'>
                        <div ng-switch on="quest.ui.type">
                            <div ng-switch-when="ms-select-single" >
                                <div ms-select-single quest='quest'></div>
                            </div>
                           ...
                        </div>
                    </div>
                </div>

When i turn to next page (I have a button that does it), i want first to my ng-leave to do it's job and leave, and only than do the enter, not simultaneously...

Is it possible without any use of angular at all? if not, What are to be my options?

Upvotes: 0

Views: 939

Answers (1)

peppeocchi
peppeocchi

Reputation: 824

You can try different solutions:

add a delay to the ng-leave class

animation-delay: 1s;

put your animations when ng-enter is active and ng-leave is active (not sure about this solution, I usually use transitions and not animations, but give it a try)

.pageRenderer.ng-enter.ng-enter-active {
    animation:  fadeIn 1s;
}

.pageRenderer.ng-leave.ng-leave-active {
    animation: bounceOutLeft 1s;
}

Upvotes: 2

Related Questions