1

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

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

我对其进行了调整，使其具有媒体查询（在 css 文件上），因此动画仅在屏幕宽度小于 640 像素的情况下才有效。当屏幕大于 640px 时，div 只会显示/隐藏而没有动画。

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

你能解释一下为什么会发生这种情况，它是否可以以某种方式修复？

非常感谢您的帮助！谢谢

4

2 回答 2

2

好吧，它看起来确实像一个 Angular.js 动画错误。似乎如果一个类没有为它注册一个 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 - 它会被优化掉，从而导致相同的错误。

于 2013-12-11T14:57:45.980 回答
0

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

我有另一个媒体查询与您的原始查询执行相同的操作，但也会更改屏幕宽度 1024px - 641px 的背景颜色。

于 2013-12-11T15:01:41.740 回答