вимкнути 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 (наприклад, 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;
}

Це дозволить правильно встановити непрозорість, і ui-select буде працювати.