angularjs - ng-animate slide animation misaligned -


i've got working (animation) doesn't pretty.

when animation/slide triggered. "leaving" slide pops left of screen , hugs "entering" slide.

it overshoots endpoint during animation snaps back. ng-animate css follows:

css :

.slide-leave, .slide-enter {  -webkit-transition: 5s linear all; /* safari/chrome */  -moz-transition: 5s linear all; /* firefox */  -o-transition: 5s linear all; /* opera */  transition: 5s linear all; /* ie10+ , future browsers */   /* animation preparation code */  opacity: 0.5; }   .slide-enter { position: relative; left: -100%; }  .slide-enter.slide-enter-active { left: 0; opacity: 1; }  .slide-leave { opacity: 1; }  .slide-leave.slide-leave-active {    position: relative;    opacity: 0;    left: 100%; } 

here's semi-working plunkr. notice "leaving" view hugs "entering" view. can animation started pressing black square in header.

http://plnkr.co/edit/fg44cpj65s4gr6qzpm1x?p=preview


Comments

Popular posts from this blog

c++ - Creating new partition disk winapi -

Android Prevent Bluetooth Pairing Dialog -

php - joomla get content in onBeforeCompileHead function -