CSS动画关键帧只角的应用程序运行一次 [英] CSS keyframe animations only running once in Angular app
问题描述
更新：总之，我的问题似乎是，DOM停止更新，每当我打电话从一个状态切换到另一个应用程序中的功能。
Updated: In short, my problem seems to be that the DOM stops updating whenever I am calling a function which switches from one state to another in the application.
更有趣的是，其实这只是发生这个功能是从一个特定的元素称为第二次。
More interestingly though, this actually only happens the second time this function is called from one particular element.
有关具体细节，我正在开发的AngularJS 1.2.28，一个一个单页的应用程序，我剥夺我的HTML模板，显示-widgets.html 遏制如下只有3个元素：
For specific details, I'm developing an single page app in AngularJS 1.2.28 and one I've stripped my html template, display-widgets.html to contain only 3 elements as follows:
<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>
控制器看起来类似如下：
The controller looks something like as follows:
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与setupInterstitial（）之前，另一个函数被调用切换状态纳克级）。会发生在这个国家的一些互动（例如小部件添加到购物篮），一旦完成，将状态切换回显示的小部件状态。
The intended functionality is that after the widget is selected, onWidgetSelected() is called passing the selected widget as a parameter where the animation variable is updated (with the intention to add class with ng-class in the DOM) with setupInterstitial() before another function is called to switch the state. Some interaction will occur on this state, (e.g. add widget to basket) and once complete, the state is switched back to the display-widgets state.
我已经剥夺了HTML到这里来只是用于测试p标签，但如果你选择相同的小部件（p标签），我发现再次，该元素是不是在页面更新和以前一样，和更有趣的是是不发生DOM更新的。控制台日志和警报告诉我，棱角分明已经更新了正确的变量中的控制器，但状态转换似乎prevent发生的任何DOM更新。选择窗口小部件2将更新DOM如预期的，但与第一插件，这不会发生超过一次。选择小部件1，就好像是它选择了第二个时间不会更新DOM后，选择小部件也1'，但小部件1日之前选择这将对作为选择构件1首相同的效果。
I've stripped the html down here to be just p tags for testing but I've found if you select the same widget(p tag) again, the element is NOT updated in the page as before, and more interesting still is that no DOM updates occur at all. Console logs and alerts show me that angular has updated the correct variables in the controller but the state transition seems to prevent any DOM updates occurring. Selecting the widget 2 will update the DOM as expected, but as with the first widget, this will not occur more than once. Selecting 'also widget 1' after selecting widget 1 will not update the DOM as though it were the second time it were selected, but selecting this before widget 1 will have the same affect as selecting widget 1 first.
有谁知道这是与浏览器不会再进行动画，因为它是一个单页的应用程序的一个具体问题？或者是有可能是一个问题，在我的code别处？我一直无法通过谷歌或堆栈溢出找到任何与具有类似问题的人。
Does anybody know if this is a specific issue with browsers not performing animation again because it is a single page app? Or is there likely to be an issue elsewhere in my code? I haven't been able to find anything via google or stack overflow with people having a similar issue.
推荐答案
听起来一旦你添加的类，它永远不会再删除。
Sounds like once you've added the class, it is never removed again.
一旦类添加，动画开始。当您再次添加它没有什么变化，因为它已经有了该类并且已经应用了所有造型。
Once the class is added, the animation starts. When you add it again nothing changes because it already had that class and all the styling was already applied.
这篇关于CSS动画关键帧只角的应用程序运行一次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
