CODEWITHSUNDEEP
angularjs
Vucko
Vucko

Reputation: 20834

Angular ng-view animation callback

I'm learning angular and I have a question about the animations between ng-view templates.

When I click on the template link, the current template and the new one (clicked one) keeps animating simultaneously, making the content after the ng-view jump down for both old and new templates height.

This is my index.html:

<ul>
    <li><a href="#/">View 1</a></li>
    <li><a href="#/view2">View 2</a></li>
</ul>

<div>
    <div ng-view></div>
</div>

page.html (template)

<div class="page">
    <div class="center"><!-- this div centers the content horizontally,
                             it has a fixed value (with margin:0 auto) which
                             will change with media querys -->

        <h1>view</h1>

    </div>
</div>

And CSS:

.ng-enter, .ng-leave {
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}

.ng-enter {
    opacity: 0;
}

.ng-enter-active{
    opacity: 1;
}

.ng-leave {
    opacity: 1;
}

.ng-leave-active {
    opacity: 0;
}

.page>div.center{
    width: 500px; /* fixed width, this value will change in media queryes*/
    margin: 0 auto;
}

New plunker

On start View 1 is shown. How to make that when I click on View 2 to first fade out View 1, and then fade in View 2?

Now when I click View 2 it start the fadein simultaneously with View 1 fading out, making the content after ng-view jump for both templates height, which I don't want.

As @Dabbiemiller suggested, using display:inline-block suits but then it breaks my horizontal centering - plunker

Upvotes: 1

Views: 854

Answers (2)

Nenad Nikolic
Nenad Nikolic

Reputation: 208

replace 

.ng-enter, .ng-leave {
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}

.ng-enter {
    opacity: 0;
}

with the following code

.ng-enter {
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
    opacity: 0;
}

you don't need to make animation on both events(enter/leave) you can make just on enter and it wont make the simultaneous animation it will hide the first view immediately and then animate the second .

http://plnkr.co/edit/iVSRrg9nBaDTtHUZcDDu

if you need one animation after another you need a callback. To avoid repetition you can find the answer here:

AngularJS css animation + done callback

Upvotes: 1

DebbieMiller
DebbieMiller

Reputation: 452

Take this: http://plnkr.co/edit/EcI5kBxo4pXCsh3th8Jh?p=preview

<div ng-view style="display:inline-block;"></div>

And as said in the comments, add delay to your transitions:

.ng-enter{
  -webkit-transition: all 2s ease 1s;
  -moz-transition: all 2s ease 1s;
  -o-transition: all 2s ease 1s;
  transition: all 2s ease 1s;
}

.ng-leave {
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}

Edit: After the comment from Vucko, saying my solution isn't working by him, because of an inner div that has some fixed width, I've suggested a new solution here , with position:absolute;.

Upvotes: 3

Related Questions