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标签），该元素不会像以前那样在页面中更新，更有趣的是，根本没有DOM更新。控制台日志和警报显示angular已更新控制器中的正确变量，但状态转换似乎可以防止发生任何DOM更新。选择窗口小部件2将按预期更新DOM，但与第一个窗口小部件一样，这不会出现多次。选择小部件1＆＃39;选择窗口小部件1之后将不会更新DOM，就好像它是第二次选择它一样，但是在窗口小部件1之前选择此窗口将具有与首先选择窗口小部件1相同的效果。

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

Answer 1

听起来，一旦你添加了这个课程，它就永远不会被删除了。

添加类后，动画开始播放。再次添加时，没有任何更改，因为它已经有了该类，并且已经应用了所有样式。

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

1 个答案: