В этом документе есть пример анимации ng-if: https://docs.angularjs.org/api/ng/directive/ngIf , если вы быстро и многократно нажмете на этот флажок, вы увидите более одного элемента, Я не знаю, как этого избежать.Быстрый выход и ввод причины множественного элемента в угловой ng-if анимации
Это происходит потому, что ngIf ведет себя отличным от ngShow, например. ngShow просто добавляет display: none стиля к элементу, который должен быть скрытым, в то время как ngIf делает следующее:
директивы ngIf удаляет или восстанавливает часть DOM дерева на основе {выражение}. Если выражение, присвоенное ngIf, оценивает на ложное значение, тогда элемент удаляется из DOM, в противном случае клон DOM добавляется клон элемента .
Поэтому, если анимация занимает немного времени, в DOM будет более одного элемента.
В примере Olivvv, если вы просто изменили задержку .animate-if.ng-enter, .animate-if.ng-leave на 0.001s, вы увидите, что вы не можете получить более одного элемента.
Здесь вы увидите разветвленную версию официальной документации AngularJS. http://plnkr.co/edit/ok7nwOIRpR1TYYRkBRXj?p=preview
Я только модифицировала свою задержку 0.5s в 0.001s
Спасибо за объяснение. Итак, клонирование происходит быстрее, чем удаление, и они не блокируют друг друга? поэтому, если хотите, чтобы анимация была «длинной», каково решение? добавить debouncer, чтобы предотвратить щелчки, чтобы вызвать действие переключения, пока анимация все еще работает? (btw, не должен быть угловатым, поскольку каркас позаботится об этом? imo мы не должны получать условия гонки, используя только самое стандартное условие) – Olivvv
Прежде всего помните, что AngularJS используется миллионами людей, поэтому я считаю, что для дилемма поддержания его стандарта, но заставляя вас использовать его таким образом или предоставляя вам свободу использовать его так, как вы хотите, они держали со вторым. –
Итак, еще одна вещь, которую вы должны учитывать, - это использование ngShow, которое считается лучшим решением при частом изменении состояния. Вам не нужно удалять его из DOM и воссоздавать его каждый раз. Вы могли бы сделать то, что вы упомянули с дебютантом, чтобы предотвратить клики, но это хорошее решение для UX? Или это просто грязный обход? –
в классе .animate-если вы можете дать позицию: абсолютная; –