Search code examples
angularjscss-animationsng-animate

slide animation effect in angular is not working as expected

I am new to web development Trying to create a sliding page in angular ng-view but its not working as expected when the page two is entering its displaying below the page one till page one is available.please see the code here.

.slide.ng-enter{
    transition-duration: 500ms;
    transform: translateX(100%);
}
.slide.ng-enter-active{
  transform: translateX(0%);
}
.slide.ng-leave{
  transition-duration: 500ms;
  transform: translateX(0%);
}
.slide.ng-leave-active{
  transform: translateX(-100%);
}

I also need to make the page one slide from left to right.Can someone help me on this

Solution

  • I have added position: absolute to .slide. If that is acceptable in the project you are working then the below solution works fine. Please check the updated plunker.

    .slide {
    top: 0;
    position: absolute;
    width: 100%;
}

    https://plnkr.co/edit/qC0YS2Gj3ddiNvuhjKzV?p=preview