wyłącz nganimate dla niektórych elementów

Używam moduł ngAnimate, ale wszystkie moje ng-if, ng-showitp, są dotknięte, że chcę wykorzystać ngAnimate dla wybranych elementów. Ze względu na wydajność i kilka błędów w elementach, które pokazują i ukrywają się bardzo szybko.

dzięki.

Po prostu dodaj to do swojego CSS. Najlepiej, jeśli jest to ostatnia zasada:

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

następnie dodaj no-animatedo klasy elementu, który chcesz wyłączyć. Przykład:

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

Jeśli chcesz włączyć animacje dla określonych elementów ( zamiast wyłączać je dla określonych elementów), możesz użyć $ animateProvider do skonfigurowania elementów o określonej nazwie klasy (lub wyrażeniu regularnym) do animacji.

Poniższy kod włączy animacje dla elementów posiadających angular-animateklasę:

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

Oto przykładowe znaczniki zawierające angular-animateklasę włączającą animacje:

<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>

Przykład Plunkera zapożyczony i zmodyfikowany z tego bloga, gdzie tylko pierwszy filtr zawiera animacje (ze względu na posiadanie angular-animateklasy).

Zwróć uwagę, że używam angular-animatejako przykładu i jest on całkowicie konfigurowalny za pomocą .classNameFilterfunkcji.

Istnieją dwa sposoby na rozłączenie animacji w AngularJS, jeśli masz moduł ngAnimate jako zależność od swojego modułu:

1. Wyłącz lub włącz animację globalnie w usłudze $ animate:

   $animate.enabled(false);

2. Wyłącz animacje dla konkretnego elementu - musi to być element dla tego angulara doda klasy css Animationstate (np. Ng-enter, ...)!

   $animate.enabled(false, theElement);

Od wersji Angular 1.4 należy odwrócić argumenty:

$animate.enabled(theElement, false);

Dokumentacja dla$animate .

Aby wyłączyć ng-animate dla niektórych elementów, używając klasy CSS, która jest zgodna z paradygmatem Angular animate, możesz skonfigurować ng-animate do testowania klasy przy użyciu wyrażenia regularnego.

Config

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

Stosowanie

Po prostu dodaj ng-animate-disabledklasę do wszystkich elementów, które chcesz ignorować przez ng-animate.

Kredyt http://davidchin.me/blog/disable-nganimate-for-selected-elements/

dzięki, napisałem dyrektywę, którą możesz umieścić na elemencie

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);
    };
});

Odkryłem, że $animate.enabled(false, $element);będzie działać dla elementów, które używają ng-showlub, ng-hideale nie będzie działać dla elementów, które używają ng-ifz jakiegoś powodu! Rozwiązanie, które ostatecznie wykorzystałem, polegało na zrobieniu tego wszystkiego w CSS, czego nauczyłem się z tego wątku na GitHubie .

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;
  }
}

Ja nie chce używać ngAnimate na moich ng-if„s, więc byłoby to moje rozwiązanie:

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

Po prostu zamieszczam to jako kolejną sugestię!

Mam listę, z której pierwszy lijest ukryty za pomocą ng-hide="$first". Użycie ng-enterskutkuje lipokazaniem się przez pół sekundy przed zniknięciem.

W oparciu o rozwiązanie Chrisa Barra mój kod wygląda teraz następująco:

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. */

Wiem, że to opóźniona odpowiedź, ale tutaj używamy w MainController:

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

Ale problem polega na tym, że kiedy wyłączamy wszystkie animacje, konfiguracja interfejsu użytkownika jest tak skonfigurowana opacity: 0.

Dlatego konieczne jest ustawienie krycia na 1 za pomocą CSS:

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

Spowoduje to prawidłowe ustawienie krycia, a ui-select zadziała.