javascript - AngularJS ngAnimate firing too soon -


at moment p2 animate in p1 animating out, p1 removed , p2 glitch page. desired effect 1 fades out 2 fades in.

html:

 <nav>     <a ng-click="changeview('p1')">p1</a>     <a ng-click="changeview('p2')">p2</a>  </nav>  <div ng-view class="page">  </div> 

css:

.page {     border:1px solid red;     background-color:#eee;     transition:all 1s linear; }  .page.ng-enter {     -webkit-opacity:0;     opacity:0; }  .page.ng-enter-active {     -webkit-opacity:1;     opacity:1; }  .page.ng-leave {     -webkit-opacity:0;     opacity:0; }  .page.ng-leave-active {     -webkit-opacity:1;     opacity:1; } 

is there standard way achieve this? i've tried using ng-enter-stagger recommended yearofmoo still no dice.

instead of transitioning, try animation delay until 50%. on sass, might like:

// keyframes, regular css i've got sass snippet +keyframes( myout )   0%     +opacity( 1 )   50%, 100%     +opacity( 0 )   +keyframes( myin )   0%, 50%     +opacity( 0 )   100%     +opacity( 1 )  // add classes .page.ng-enter-active     +animation( myin 1s 1 )  .page.ng-leave-active     +animation( myout 1s 1 ) 

Comments

Popular posts from this blog

javascript - RequestAnimationFrame not working when exiting fullscreen switching space on Safari -

Python ctypes access violation with const pointer arguments -