Question

请参阅以下plunker示例：http://plnkr.co/edit/e7Pr3O8mAaONiDiXFQay?p=preview

这是一个简单的Angular.js动画设置，我从ng文档中获取。

我将其修改为具有媒体查询（在css文件上），因此仅在屏幕宽度小于640px时动画才会起作用。当屏幕大于640px时，div只会在没有动画的情况下显示/隐藏。

它在页面重新加载时效果很好。但是，当我重新调整页面大小以“测试响应性”时，动画不再发生了。

你能否解释为什么会发生这种情况，并且能以某种方式解决这个问题吗？

非常感谢您的帮助！感谢

Answer 1

嗯，它确实看起来像一个Angular.js动画bug。似乎如果某个类没有为其注册ng-amination，它似乎永远不会再次检查它是否有动画（至少在重新加载页面之前）。一个可能的解释（我在这里猜测）可能是Angular.js在出错时取消注册它可能对类有的任何监听器。

无论如何，你可以通过添加一个补充的最小宽度声明和一个即时动画来解决这个问题，它包含了所有可用的分辨率。

例如：

@media only screen and (min-width : 640px) {

  .animate-show-hide.ng-hide-add, .animate-show-hide.ng-hide-remove {
    -webkit-transition:all linear 0.0001s;
    -moz-transition:all linear 0.0001s;
    -o-transition:all linear 0.0001s;
    transition:all linear 0.0001s;
    display:block!important;
  }

  .animate-show-hide.ng-hide-add.ng-hide-add-active,
  .animate-show-hide.ng-hide-remove {
    opacity:0;
  }

  .animate-show-hide.ng-hide-add,
  .animate-show-hide.ng-hide-remove.ng-hide-remove-active {
    opacity:1;
  }
}

重要！请注意我使用了非常短的动画间隔，而不是0.这是因为如果动画长度为0 - 它会被优化掉，导致同样的错误。

Answer 2

这是因为当你超出你为过渡设置的大小时，媒体查询不再有动画。看看http://plnkr.co/edit/CJ2fLVUqsXPPLvuCHWhT?p=preview

我的另一个媒体查询与原始版本相同，但更改了背景颜色以及屏幕宽度1024px - 641px。

基于媒体查询的角度js动画不适用于窗口调整大小

2 个答案: