ui-view：无位置的幻灯片动画：绝对

Question

我想在ui-view之间转换时实现幻灯片放入/缩小动画。

Here's a plunker.（从主页导航＆gt;关于＆gt;主页）

当出现新视图时，旧视图会在其下方跳转。目的是使旧视图无缝地向左滑动，没有垂直移动，如旋转木马。

我知道position: absolute解决了这个问题;但这样做会让我的布局中的其他元素变得混乱;我想保留页面流中的元素。我尝试了display，position等各种组合。

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

还有其他解决方案吗？旋转木马如何工作？ （关闭检查源代码......）

编辑：

检查了Bootstrap的源代码后，他们会在幻灯片动画正在进行时使用position: absolute（.next和.prev类）。我得出的结论是absolute的使用对于这种效果是不可避免的;至少它只需在效果期间适用。