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

【问题标题】：angular js animation based on media query not working on window resize基于媒体查询的角度js动画不适用于窗口调整大小
【发布时间】：2013-12-11 23:01:41
【问题描述】：

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

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

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

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

您能否解释一下为什么会发生这种情况，是否可以通过某种方式解决？

非常感谢您的帮助！谢谢

【问题讨论】：

标签： javascript css angularjs animation ng-animate

【解决方案1】：

嗯，它看起来确实像一个 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 - 它会被优化掉，从而导致相同的错误。

【讨论】：

【解决方案2】：

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

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

【讨论】：