angular 中的幻灯片动画效果未按预期工作

Question

我是 web 开发的新手试图在 angular ng-view 中创建一个滑动页面但是当第二页进入显示在第一页下方直到第一页是 available.please 见代码 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%);
}

我还需要将页面从左滑到 right.Can有人帮我做这件事

Answer 1

我已将 position: absolute 添加到 .slide。如果这在您正在工作的项目中是可以接受的，那么下面的解决方案就可以正常工作。请检查更新的 plunker。

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

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

angular 中的幻灯片动画效果未按预期工作

slide animation effect in angular is not working as expected

css-animations

angularjs

ng-animate