Css ui视图：无位置的幻灯片动画：绝对

我试图在

ui视图

s之间转换时实现滑入/滑出动画

（从主页>关于>主页导航）

当新视图出现时，旧视图会跳到其下方。其目的是让旧视图无缝地向左滑动，而不发生垂直移动，就像旋转木马一样

我知道

的立场：绝对的
解决方案；但是这样做会把我的布局的其他元素弄乱；我想保持页面流中的元素。我已经尝试了
显示
、
位置
等各种组合

  .slide-left {
    position: relative;
    transition: all 1s ease-in-out;
    margin: 1em;
  }
  .slide-left.ng-enter {
    transform: translateX(110%);
    opacity: 0;
  }
  .slide-left.ng-enter-active {
    transform: translateX(0);
    opacity: 1;
  }
  .slide-left.ng-leave {
    transform: translateX(0);
    opacity: 1;
  }
  .slide-left.ng-leave-active {
    transform: translateX(-110%);
    opacity: 0;
  }

还有其他解决办法吗？旋转木马是如何工作的？（去检查他们的源代码…）

编辑：
检查引导程序的源代码后，当幻灯片动画正在进行时，他们使用
position:absolute
（
.next
和
.prev
类）。我的结论是，使用
absolute
是这种效果无法避免的；至少它只需要在效果期间应用。
如果您在包装元素的div（.container或添加一个新的）中添加“overflow:hidden”，那么您提供的代码可以很好地工作。希望它不会干扰代码中的任何其他内容谢谢您的想法，@Turqueso，但我不认为这有什么区别（无论如何，在Chrome、Firefox和Safari上都没有）。退出视图仍然会跳到进入视图的下方（如果您的浏览器窗口足够高，则可见-我希望它保持在同一水平。我第一次误读了您的问题，抱歉。再次阅读时，我尝试了一些想法，但找不到一个。也许在重构时值得考虑？如果您在包装元素的div中添加“overflow:hidden”，则您提供的代码工作正常（.container或添加一个新的）希望它不会弄乱你代码中的任何其他内容谢谢你的想法，@Turqueso，但我认为这没有什么区别（不管怎样，在Chrome、Firefox和Safari上都没有）。退出视图仍然会跳到进入视图的下方（如果您的浏览器窗口足够高，则可见-我希望它保持在同一水平。我第一次误读了您的问题，抱歉。再次阅读时，我尝试了一些想法，但没有找到。也许在重构时值得思考？