Отключение ngAnimate для некоторых элементов в AngularJS

  • 1,113
  • 0
  • 0
  • 0
  • 1 год назад

В AngularJS существует два способа отключения ngAnimate для выделенных элементов. Вы можете указать AngularJS чтобы тот применял CSS анимацию только к элементам с определенным классом. Или, если вы пишете собственную директиву, вы можете отключить анимацию напрямую в методе $animate.enabled.

CSS способ

Вы можете настроить ngAnimate таким образом, что анимация будет применяться только к элементам, принадлежащим к определенному классу.

angular.module('Application', ['ngAnimate'])
 .config(function($animateProvider) {
   $animateProvider.classNameFilter(/ng-animate-enabled/);
 });

#classNameFilter принимает в качестве параметра регулярное выражение. Таким образом, вы можете не только включать анимацию для набора классов, но и делать обратное - отключать её только для некоторых классов. Например:

angular.module('Application', ['ngAnimate'])
 .config(function($animateProvider) {
   $animateProvider.classNameFilter(/^(?:(?!ng-animate-disabled).)*$/);
 });
.btn {
 color: #ccc;
 transition: color .3s ease-out;
}

.btn:hover {
 color: #000;
}
<a href="/logout" class="btn ng-animate-disabled" ng-show="isMember">Logout</a>
<a href="/login" class="btn ng-animate-disabled" ng-hide="isMember">Login</a>

При такой настройке кнопки login/logout не используют анимацию. Такой подход полезен, когда вы применяете CSS переходы (css transitions) только для изменения стиля элемента, а директиву ng-hide вы указали случайно. Таким образом, прежде чем спрятать элемент будет выдержана некоторая задержка по времени. Сама задержка образуется от того, что ng-hide использует $animate.addClass. Таким образом, сначала заканчивается CSS переход, а только потом ng-hide добавляет необходимый класс.

JS способ

JS способ очень прост сам по себе. Вам всего лишь надо получить ссылку на тот элемент, для которого вы хотите отключить ngAnimate.

$animate.enabled(false, element);

Но такой метод целесообразно использовать только в случае, когда вы создаете свою директиву. А делать выборку элементов вообще не рекомендуется в контроллере, так как нарушается идея разделения MVC.

Лично я считаю, что первый метод более гибок в применении, он применим к парадигме ngAnimate об использовании CSS для задания стилевых переходов.

Комментарии

0