ngShow не добавляет класс ng-show

Я пытаюсь создать анимацию для элемента, который изначально скрыт атрибутом ng-show="boolDefaultIsFalse".

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

Это связано с тем, что элемент никогда не получает класс ng-show. Он начинается с класса ng-hide. Но как только я показываю элемент, этот класс удаляется и новые не добавляются.

Вот демонстрация моей проблемы: http://plnkr.co/edit/OkJnxKlp9Ym1mc8CCD05

Кто-нибудь знает, как решить эту проблему?

Обновлять

Я обновил планкер.

Я добавил директиву ng-class, чтобы вручную добавить класс ng-show в класс div. Но анимация все равно не воспроизводится.


angularjs ng-animate ng-show ng-hide
person Vivendi    schedule 11.07.2014    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Когда вы включаете ngAnimate в качестве зависимости вашего модуля:

var app = angular('app', ['ngAnimate']);

Angular автоматически добавит/удалит следующие классы CSS при применении директив ng-show/ng-hide:

ng-hide-add
ng-hide-add-active
ng-hide-remove
ng-hide-remove-active

Чтобы воспользоваться этим преимуществом, добавьте к этим классам свои стили анимации CSS.

Вот демо

person pixelbits    schedule 12.07.2014

arrow_upward
0
arrow_downward

Из угловых документов для ng-show:

Элемент отображается или скрывается путем удаления или добавления класса CSS ng-hide к элементу.

Если вы хотите динамически добавлять/удалять класс, вам следует использовать ng-class.

person Sam Dufel    schedule 11.07.2014
comment
У меня сложилось впечатление, что ng-show автоматически добавляет ng-show или ng-hide к элементу. Но я думаю, что ошибался. Я обновил свой плункер, добавив директиву ng-class. Теперь у него есть класс ng-show, когда я нажимаю на ссылку. Но анимация все равно не воспроизводится - person Vivendi; 12.07.2014
comment
В этом случае может показаться, что проблема связана с вашим css. - person Sam Dufel; 12.07.2014
comment
Да, но он отлично работает для ng-include (см. обновленный плункер). Я не понимаю, почему это не сработает для ng-show. - person Vivendi; 12.07.2014