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