Angularjs 角度UI路由器：状态更改时的UI视图定位

我目前正在为一家机构开发一个重角度驱动的主页。现在我在状态改变。我添加了一个带有简单淡入效果的页面过渡。现在我遇到的问题是，在状态更改时添加的新ui视图在第一个ui视图之前就已经准备好了。一切正常，但随着第一个ui视图逐渐淡出，第二个ui视图已经添加，过渡看起来很糟糕。因此，我想在第一个ui视图之后添加新的ui视图

重要提示：我使用的是视差效果，因此不可能使用带有页面容器和绝对定位的解决方案

这张图片显示了我以后想要的东西

---

我曾经遇到过类似的问题，因为我在进入和离开时都有动画

您不需要在进入和离开时都使用动画。 只能在“左”或“回车”时播放动画

例如

在此对话框中签出动画中的缓和

或者，如果希望在“进入”和“离开”中都显示动画，则在动画中添加延迟

为过渡添加延迟：

.ng-enter{
  -webkit-transition: all 2s ease 1s;
  -moz-transition: all 2s ease 1s;
  -o-transition: all 2s ease 1s;
  transition: all 2s ease 1s;
}

.ng-leave {
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}

---

基于@HarishR的答案：

我们有两个转变：

.ng-enter{
  -webkit-transition: all 2s ease 1s;
  -moz-transition: all 2s ease 1s;
  -o-transition: all 2s ease 1s;
  transition: all 2s ease 1s;
}

.ng-leave {
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}

在：

输出：

这将花费1秒时间淡入和淡出块。当只有1个块时，它会在1秒内立即消失。如果有两个街区从一个街区过渡到另一个街区呢？。我们可以使用延迟和一些漂亮的css：

// Selector only matches if 2 sibling animating elements exist
.ng-animate + .ng-animate {
  // Avoid pushing around DOM
  // Property disappears once the first sibling leaves
  position:absolute;
  // Delay fade-in until first sibling leaves
  transition-delay: 1s; // autoprefixer
}

---

如果没有这个奇特的选择器，第一次打开视图时，在任何事情发生之前都会有1s的延迟。

在这种情况下，ng animate还不够吗？新视图插入的位置几乎是硬编码到ui视图的代码中的：我正在使用ng animate。否则就不可能进行转换，是吗？嗯……是的，可以使用JavaScript应用CSS转换，而不使用ng animate。看到您没有指定您正在使用ng animate，我假设您没有。ng视图几乎是硬编码的，用于在DOM中现有视图之后插入新视图。因此，您的问题在于转换的CSS规则。你也没有给我们看。你能制造一个问题的抢手货吗？

.ng-exit {
  transition: opacity 1s ease; // autoprefixer
  opacity: 1; // start animating
}
.ng-exit-active {
  opacity: 0; // end animating
}

// Selector only matches if 2 sibling animating elements exist
.ng-animate + .ng-animate {
  // Avoid pushing around DOM
  // Property disappears once the first sibling leaves
  position:absolute;
  // Delay fade-in until first sibling leaves
  transition-delay: 1s; // autoprefixer
}