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
Post a Comment