karthik karthik - 5 months ago 22
AngularJS Question

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

Answer

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