Angular.js: ng-if 在 CSS 无限关键帧动画中表现得很奇怪

创建于 2014-01-03 · 3评论 · 资料来源: angular/angular.js

请参阅以下 Plunker： http ://plnkr.co/edit/i1DJ6ejtuHVFHty9jxfe?p=preview

元素<div class="box" ng-if="showBox">有一个 5 秒的无限动画，用于永久循环背景。当showBox被切换时，元素的动画会重新开始，并且直到整个 5 秒过去后它才会从 DOM 中删除 - 尽管没有定义进入/离开动画。

更有问题的是：如果在动画结束之前多次切换该值（多次单击复选框），元素的多个副本将同时显示。

ngAnimate moderate bug

资料来源

tdumitrescu

最有用的评论

问题是 ngAnimate 认为您的无限动画适用于所有使用的动画事件（如进入、离开等）。因为它是一个无限动画，所以 CSS 事件永远不会被触发，直到最后的倒计时结束，也就是 7.5 秒（5 x 1.5 == 7.5）之后。

您需要通过覆盖元素上的.ng-animate CSS 类并取消关键帧动画来告诉 ng-animate 不要为无限背景动画设置动画。

.box.ng-animate {
  -webkit-animation: none 0s;
  animation: none 0s;
}

不幸的是，在 JavaScript 中检测样式和 CSS 类非常有限。在早期版本的 AngularJS 中，我们规定您只能在动画属性（如 .ng-enter、.ng-leave 等）上定义 CSS 动画/过渡，但这导致的问题多于解决的问题。所以在这种情况下，你需要做相反的事情。

附注。您只需要-webkit-前缀和标准的animation属性，因为所有其他供应商都放弃了它们的前缀。

matsko 于 2014-01-05

👍2

您需要通过覆盖元素上的.ng-animate CSS 类并取消关键帧动画来告诉 ng-animate 不要为无限背景动画设置动画。

.box.ng-animate {
  -webkit-animation: none 0s;
  animation: none 0s;
}

附注。您只需要-webkit-前缀和标准的animation属性，因为所有其他供应商都放弃了它们的前缀。

matsko 于 2014-01-05

👍2

很酷，感谢您的解决方法。

一次多副本的事情对我来说仍然是一个错误：我编写代码的假设是使用ng-if的元素要么出现一次，要么根本不存在，我希望框架，以防止它由于无意的菜鸟错误而如此容易地破坏。如果我误解了ng-if （或ng-switch ）是如何运作的，请纠正我。

tdumitrescu 于 2014-01-06

多个副本在那里是因为动画仍在进行。并且 $animate 有一个catch-all动画，用于在您的持续时间 * 1.5 到期后发生的关键帧/过渡。这就是为什么它们会在片刻之后消失。

您的 ng-if 代码是正确的。是的，它只有在为真时才存在。但是每次表达式再次变为真时，内部都会制作元素的新副本。但是由于动画挂在较旧的元素上，因此在捕获所有动画进入之前它还没有被删除。

ng-switch 和 ng-if 的操作方式相同。只有 ng-switch 有多个元素，而不是只有一个。

matsko 于 2014-01-06

此页面是否有帮助？

0 / 5 - 0 等级