Angular UI Router：ui-view定位状态变化

Question

我目前正在为一家代理商开发一个重型角度驱动的主页。现在我正处于改变状态。我添加了一个简单的淡入淡出效果的页面过渡。现在我遇到的问题是，当状态改变时添加的新ui-view被添加到第一个ui-view之前。一切都还好，但随着第一个ui-view逐渐消失，第二个已经添加，过渡看起来很糟糕。所以，我希望在第一个ui-view之后添加新的ui-view。

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

此图像显示了我之后想要的内容。

Answer 1

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

进入和离开都不需要动画。 您只能在休假时或仅在输入

时拥有动画

E.g。

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

在此PLUNKER

中查看动画中的缓动效果

如果您想要进入和离开动画，则在动画中添加延迟

为您的过渡添加延迟：

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

Answer 2

建立@HarishR的回答：

http://plnkr.co/edit/pzsDd1zPvHgdZe099upi?p=preview

我们有2个转换：

<强> IN：

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

OUT：

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

这需要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
}

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