Angularjs 设置ui路由器状态更改动画：动画结束时，div会短暂重新出现

下面是对这种现象的一个解释：

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

我对整个webdev游戏都很陌生，所以我不确定这个问题是与ngAnimate、ui路由器有关，还是与我在CSS中使用ng enter/ng leave的方式有关。很明显，我希望这个部门一旦淡出人们的视线，就不在了

我的方法是通过ui sref触发一个转换，然后用这种CSS设置转换的动画

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

其他部门也是如此。从技术上讲，它可以工作，但在动画期结束时有一个奇怪的伪影

有什么想法吗？谢谢

您可以使用：

[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);
}

---

你可以加上

文件：

---

谢谢！我在我自己的动画中添加了ng leave活动更改，它似乎可以工作，所以我接受这一点作为答案。总有一天我会明白为什么这些事情是这样的。（当我有足够的代表时，我会投你一票）。

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