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