отключить nganimate для некоторых элементов

Я использую модуль ngAnimate, но он влияет на все мои ng-ifи ng-showт.д., я хочу использовать ngAnimate для некоторых выбранных элементов. Для производительности и некоторых ошибок в элементах, которые отображаются и скрываются очень быстро.

Спасибо.

Просто добавьте это в свой CSS. Лучше всего, если это будет последнее правило:

.no-animate {
   -webkit-transition: none !important;
   transition: none !important;
}

затем добавьте no-animateк классу элемента, который вы хотите отключить. Пример:

<div class="no-animate"></div>

Если вы хотите включить анимацию для определенных элементов (в отличие от их отключения для определенных элементов), вы можете использовать $ animateProvider для настройки элементов с определенным именем класса (или регулярным выражением) для анимации.

Приведенный ниже код включит анимацию для элементов, имеющих angular-animateкласс:

var myApp = angular.module("MyApp", ["ngAnimate"]);
myApp.config(function($animateProvider) {
  $animateProvider.classNameFilter(/angular-animate/);
})

Вот пример разметки, которая включает angular-animateкласс для включения анимации:

<div ng-init="items=[1,2,3,4,5,6,7,8,9]">
  <input placeholder="Filter with animations." ng-model="f" /> 
  <div class="my-repeat-animation angular-animate" ng-repeat="item in items | filter:f track by item" >
    {{item}}
  </div>
</div>

Пример Plunker, заимствованный и измененный из этого блога, где только первый фильтр имеет анимацию (из-за наличия angular-animateкласса).

Обратите внимание, что я использую angular-animateв качестве примера, и он полностью настраивается с помощью .classNameFilterфункции.

Есть два способа отключить анимацию в AngularJS, если у вас есть модуль ngAnimate в зависимости от вашего модуля:

1. Отключить или включить анимацию глобально в сервисе $ animate:

   $animate.enabled(false);

2. Отключите анимацию для определенного элемента - это должен быть элемент, для которого angular добавит классы css animationstate (например, ng-enter, ...)!

   $animate.enabled(false, theElement);

Начиная с версии Angular 1.4, вы должны изменить аргументы:

$animate.enabled(theElement, false);

Документация для$animate .

Чтобы отключить ng-animate для определенных элементов, используя класс CSS, который следует парадигме Angular animate, вы можете настроить ng-animate для тестирования класса с помощью регулярного выражения.

Конфиг

    var myApp = angular.module("MyApp", ["ngAnimate"]);
    myApp.config(function($animateProvider) {
        $animateProvider.classNameFilter(/^(?:(?!ng-animate-disabled).)*$/);
    })

использование

Просто добавьте ng-animate-disabledкласс к любым элементам, которые вы хотите игнорировать с помощью ng-animate.

Кредит http://davidchin.me/blog/disable-nganimate-for-selected-elements/

спасибо, я написал директиву, которую вы можете разместить на элементе

CoffeeScript:

myApp.directive "disableAnimate", ($animate) ->
  (scope, element) ->
    $animate.enabled(false, element)

JavaScript:

myApp.directive("disableAnimate", function ($animate) {
    return function (scope, element) {
        $animate.enabled(false, element);
    };
});

Я обнаружил, что это $animate.enabled(false, $element);будет работать для элементов, которые используют ng-showили, ng-hideно не будет работать для элементов, которые ng-ifпо какой-то причине используются! Решение, которое я в итоге использовал, заключалось в том, чтобы просто сделать все на CSS, о чем я узнал из этой темы на GitHub .

CSS

/* Use this for transitions */
.disable-animations.ng-enter,
.disable-animations.ng-leave,
.disable-animations.ng-animate {
  -webkit-transition: none !important;
  transition: none !important;
}

/* Use this for keyframe animations */
.disable-animations.ng-animate {
  -webkit-animation: none 0s;
  animation: none 0s;
}

SCSS

.disable-animations {
  // Use this for transitions
  &.ng-enter,
  &.ng-leave,
  &.ng-animate {
    -webkit-transition: none !important;
    transition: none !important;
  }
  // Use this for keyframe animations
  &.ng-animate {
    -webkit-animation: none 0s;
    animation: none 0s;
  }
}

Я НЕ хочу использовать ngAnimate на себе ng-if, так что это было бы моим решением:

[ng-if] {
  .ng-enter, .ng-leave, .ng-animate {
    -webkit-transition: none !important;
    transition: none !important;
  }
}

Просто разместите это как еще одно предложение!

У меня есть список, из которого первый liскрыт с помощью ng-hide="$first". Использование ng-enterрезультатов в том, liчто отображается полсекунды перед исчезновением.

Основываясь на решении Криса Барра, мой код теперь выглядит так:

HTML

<ol>
    <li ng-repeat="item in items"
        ng-hide="$first"
        ng-class="{'no-animate' : $first}">
    </li>
</ol>

CSS

.no-animate.ng-enter,
.no-animate.ng-leave,
.no-animate.ng-animate {
        transition: none !important; /* disable transitions */
        animation: none 0s !important; /* disable keyframe animations */
}

li.ng-enter {
    opacity: 0;
    transition: opacity 0.3s ease-out;
}
li.ng-enter-active {
    opacity: 1;
}

/* I use Autoprefixer. If you don't, please include vendor prefixes. */

Я знаю, что это отложенный ответ, но здесь мы используем в MainController:

// disable all animations
$animate.enabled(false);

Но проблема в том, что когда мы отключаем все анимации, ui-select настраивается на opacity: 0.

Итак, необходимо установить непрозрачность на 1 с помощью CSS:

.ui-select-choices {
    opacity: 1 !important;
}

Это правильно установит непрозрачность, и пользовательский интерфейс будет работать.