AngularJS 路由更改发生在 ng-leave 动画完成之前

Question

我正在使用以下 css 代码来为我的 ui-view 更改设置动画。

.fadein.ng-enter,
.fadeout.ng-leave {
  -webkit-transition: all linear 1s;
  -moz-transition: all linear 1s;
  -o-transition: all linear 1s;
  transition: all linear 1s;
  display: block !important;
}

.fadein.ng-enter {
  opacity: 0;
}

.fadeout.ng-leave {
  opacity: 1;
}

.fadein.ng-enter.ng-enter-active {
  transition-delay: 1s;
  opacity: 1;
}

.fadeout.ng-leave-active {
  opacity: 0;
}

在这里它被应用到 ngview：

 <div ui-view class="fadein fadeout"></div>

但是，路由更改（例如由 $state.go("home.dashboard") 启动）总是发生在我的 ng-leave 动画甚至开始（淡出动画）之前。

我尝试添加 转换延迟：1s； 属性，但动画仍未执行。

Answer 1

我不知道为什么，但是添加

position: absolute;

我的 ui-view div 解决了这个问题。