angularjs - Angular ng-view animation callback -

angularjs - Angular ng-view animation callback -

i'm learning angular , have question animations between ng-view templates.

when click on template link, current template , new 1 (clicked one) keeps animating simultaneously, making content after ng-view jump downwards both old , new templates height.

this 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"><!-- div centers content horizontally, has fixed value (with margin:0 auto) alter media querys --> <h1>view</h1> </div> </div>

and css:

.ng-enter, .ng-leave { -webkit-transition: 1s ease; -moz-transition: 1s ease; -o-transition: 1s ease; transition: 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, value alter in media queryes*/ margin: 0 auto; }

new plunker

on start view 1 shown. how create when click on view 2 first fade out view 1, , fade in view 2?

now when click view 2 start fadein simultaneously view 1 fading out, making content after ng-view jump both templates height, don't want.

as @dabbiemiller suggested, using display:inline-block suits breaks horizontal centering - plunker

replace

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

with next code

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

you don't need create animation on both events(enter/leave) can create on come in , wont create simultaneous animation hide first view , animate sec .

http://plnkr.co/edit/ivsrrg9nbadtthuzcddu

if need 1 animation after need callback. avoid repetition can find reply here:

angularjs css animation + done callback

angularjs