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

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

1 个答案: