CSS 关键帧动画仅在 Angular 应用程序中运行一次

Question

更新：简而言之，我的问题似乎是，每当我调用应用程序中从一种状态切换到另一种状态的函数时，DOM 就会停止更新。

更有趣的是，这实际上只发生在第二次从一个特定元素调用此函数时。

关于具体细节，我正在使用 AngularJS 1.2.28 开发一个单页应用程序，并且我已经剥离了我的 html 模板 display-widgets.html 以仅包含以下 3 个元素：

<p data-ng-click="widgetCtrl.onWidgetSelected(widgetCtrl.model.widgetData[0].widget)">widget 1</p>
<p data-ng-click="widgetCtrl.onWidgetSelected(widgetCtrl.model.widgetData[0].widget)">also widget 1</p>
<p data-ng-click="widgetCtrl.onWidgetSelected(widgetCtrl.model.widgetData[1].widget)">widget 2</p>

<p>{{widgetCtrl.interstitialMode}}</p> 

控制器如下所示：

widgetShop.widgetCtrl.prototype.showWidgetHome = function (widget) {
    this.state.go('widgetHome', {
        widgetId: widget.widgetID
    });
};

widgetShop.widgetCtrl.prototype.setupInterstitial = function () {
    this.interstitialMode = true;
};

widgetShop.widgetCtrl.prototype.onWidgetSelected = function(widget) {
    this.setupInterstitial();
    this.showWidgetHome(widget);
};

预期的功能是，在小部件被选中后，onWidgetSelected() 被调用，将所选小部件作为参数传递给其中动画变量被更新（意图在 DOM 中添加带有 ng-class 的类）与 setupInterstitial( ) 在调用另一个函数来切换状态之前。在此状态下会发生一些交互（例如，将小部件添加到购物篮），一旦完成，状态将切换回 display-widgets 状态。

我已将此处的 html 剥离为仅用于测试的 p 标签，但我发现如果您再次选择相同的小部件（p 标签），则该元素不会像以前那样在页面中更新，而且更有趣的是是根本没有发生 DOM 更新。控制台日志和警报显示 angular 已更新控制器中的正确变量，但状态转换似乎阻止了任何 DOM 更新的发生。选择小部件 2 将按预期更新 DOM，但与第一个小部件一样，这不会多次发生。在选择小部件 1 后选择“也小部件 1”不会像第二次选择它一样更新 DOM，但在小部件 1 之前选择它与首先选择小部件 1 具有相同的效果。

有人知道这是否是浏览器无法再次执行动画的特定问题，因为它是单页应用程序吗？还是我的代码中的其他地方可能存在问题？我无法通过谷歌或堆栈溢出找到任何有类似问题的人。

Answer 1

听起来好像一旦你添加了这个类，它就再也不会被删除了。

一旦添加了类，动画就会开始。当您再次添加它时，没有任何变化，因为它已经具有该类并且所有样式都已应用。