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() Вызывается передача выбранного виджета в качестве параметра, в котором переменная анимации обновляется (с намерением добавить класс с помощью ng-class в DOM) с помощью setupInterstitial() перед вызовом другой функции для переключения состояния. Некоторое взаимодействие будет происходить в этом состоянии (например, добавить виджет в корзину), и после его завершения состояние снова переключается на display-widgets государство.

Я сократил здесь html до p-тегов для тестирования, но обнаружил, что если вы снова выберете тот же виджет (p-тег), элемент НЕ будет обновлен на странице, как раньше, и еще интереснее то, что нет Обновления DOM происходят вообще. Журналы консоли и предупреждения показывают, что angular обновил правильные переменные в контроллере, но изменение состояния, по-видимому, предотвращает любые обновления DOM. Выбор виджета 2 обновит DOM, как и ожидалось, но, как и в случае с первым виджетом, это произойдет не более одного раза. Выбор "также виджета 1" после выбора виджета 1 не будет обновлять DOM, как если бы он был выбран во второй раз, но выбор этого параметра перед виджетом 1 будет иметь тот же эффект, что и выбор виджета 1 первым.

Кто-нибудь знает, является ли это конкретной проблемой, когда браузеры не выполняют анимацию снова, потому что это одностраничное приложение? Или может быть проблема в другом месте моего кода? Я не смог найти что-либо через Google или переполнение стека с людьми, имеющими похожую проблему.

Answer 1

Похоже, когда вы добавили класс, он больше никогда не удаляется.

Как только класс добавлен, анимация начинается. Когда вы добавляете его снова, ничего не меняется, потому что у него уже был этот класс, и все стили уже применены.