为 ui-router 状态更改设置动画：动画结束时 div 短暂重新出现

Question

这里有一个现象：http://plnkr.co/edit/xLfXyDcwKtHPM7Sdhygf?p=preview

忽略丑陋的布局；当您单击“登录”时问题很明显 - FadeOutDown 动画触发，div 尽职尽责地向页面底部前进，但就在动画结束时，它会短暂地重新出现在其原始位置。

我对整个 webdev 游戏非常陌生，所以我不确定这个问题是否与 ngAnimate、ui-router 或我在 CSS 中使用 ng-enter/ng-leave 的方式有关。我显然希望 div 在它消失后保持消失。

我的方法是通过 ui-sref 触发过渡，然后使用这种 CSS 为过渡设置动画

[ui-view].ng-leave #first-div {
    animation: fadeOutDown 1s;
}

对于其他 div 以此类推。它在技术上有效，但在动画结束时有这个奇怪的神器。

有什么想法吗？谢谢！

Answer 1

你可以使用它：

[ui-view].ng-enter, [ui-view].ng-leave {
  position: absolute;
  left: 0;
  right: 0;
  -webkit-transition:all .5s ease-in-out;
    -moz-transition:all .5s ease-in-out;
    -o-transition:all .5s ease-in-out;
    transition:all .5s ease-in-out;
}

[ui-view].ng-enter {
  opacity: 0;
  -webkit-transform:scale3d(0.5, 0.5, 0.5);
  -moz-transform:scale3d(0.5, 0.5, 0.5);
  transform:scale3d(0.5, 0.5, 0.5);
}

[ui-view].ng-enter-active {
  opacity: 1;
  -webkit-transform:scale3d(1, 1, 1);
  -moz-transform:scale3d(1, 1, 1);
  transform:scale3d(1, 1, 1);
}

[ui-view].ng-leave {
  opacity: 1;
  /*padding-left: 0px;*/  
  -webkit-transform:translate3d(0, 0, 0);
  -moz-transform:translate3d(0, 0, 0);
  transform:translate3d(0, 0, 0);
}

[ui-view].ng-leave-active {
  opacity: 0;
  /*padding-left: 100px;*/
  -webkit-transform:translate3d(100px, 0, 0);
  -moz-transform:translate3d(100px, 0, 0);
  transform:translate3d(100px, 0, 0);
}

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

---

你可以添加。

文档：https://docs.angularjs.org/api/ngAnimate#css-based-animations

[ui-view].ng-leave-active {
  opacity: 0;
}