动画 ui-router 状态变化：div 在动画结束时短暂地重新出现

Question

下面是现象的一个小插曲：http://plnkr.co/edit/xLfXyDcwKtHPM7Sdhygf?p=preview

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

我对整个 webdev 游戏还很陌生，所以我不确定这个问题是否与 ngAnimate、ui-router 或我使用的方式有关 ng-enter/ng-leave在 CSS。我显然希望 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;
}

动画 ui-router 状态变化：div 在动画结束时短暂地重新出现

Animating a ui-router state change: div reappears briefly when animation ends

angularjs

angular-ui-router

css-animations

ng-animate

animate.css