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

Question

我是 web 开发的新手尝试在角度 ng-view 中创建一个滑动页面，但是当第二页进入其显示在第一页下方直到第一页可用时，它无法按预期工作。请参阅代码 @987654321 @。

.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%);
}

我还需要让页面从左到右滑动。有人可以帮我吗

Answer 1

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

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

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