disabilita nganimate per alcuni elementi

Sto usando il modulo ngAnimate, ma tutto il mio ng-if, ng-show, ecc, sono influenzati da questo, voglio leva ngAnimate per alcuni elementi selezionati. Per le prestazioni e alcuni bug in elementi che mostrano e nascondono molto velocemente.

Grazie.

Basta aggiungerlo al tuo CSS. È meglio se è l'ultima regola:

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

quindi aggiungi no-animatealla classe dell'elemento che desideri disabilitare. Esempio:

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

Se vuoi abilitare le animazioni per elementi specifici (invece di disabilitarle per elementi specifici) puoi usare $ animateProvider per configurare gli elementi con un particolare nome di classe (o regex) da animare.

Il codice seguente abiliterà le animazioni per gli elementi che hanno la angular-animateclasse:

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

Ecco un esempio di markup che include la angular-animateclasse per abilitare le animazioni:

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

Esempio di Plunker preso in prestito e modificato da questo blog in cui solo il primo filtro ha animazioni (a causa della angular-animateclasse).

Si prega di notare che lo sto utilizzando angular-animatecome esempio ed è completamente configurabile utilizzando la .classNameFilterfunzione.

Ci sono due modi in cui puoi disbalsare le animazioni in AngularJS se hai il modulo ngAnimate come dipendenza dal tuo modulo:

1. Disabilita o abilita l'animazione a livello globale sul servizio $ animate:

   $animate.enabled(false);

2. Disabilita le animazioni per un elemento specifico - questo deve essere l'elemento per quell'angular aggiungerà le classi css animationstate (es. Ng-enter, ...)!

   $animate.enabled(false, theElement);

A partire dalla versione 1.4 di Angular dovresti invertire gli argomenti:

$animate.enabled(theElement, false);

Documentazione per$animate .

Per disabilitare ng-animate per determinati elementi, utilizzando una classe CSS, che segue il paradigma di Angular animate, puoi configurare ng-animate per testare la classe usando regex.

Config

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

Utilizzo

Aggiungi semplicemente la ng-animate-disabledclasse a qualsiasi elemento che desideri venga ignorato da ng-animate.

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

grazie, ho scritto una direttiva che puoi inserire sull'elemento

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

Ho scoperto che $animate.enabled(false, $element);funzionerà per gli elementi che usano ng-showo ng-hidema non funzionerà per gli elementi che usano ng-ifper qualche motivo! La soluzione che ho finito per usare è stata quella di fare tutto in CSS, che ho imparato da questo thread su 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;
  }
}

Io non voglio usare ngAnimate sul mio ng-if's, quindi questo sarebbe la mia soluzione:

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

Sto solo pubblicando questo come un altro suggerimento!

Ho un elenco da cui il primo liè nascosto usando ng-hide="$first". L'utilizzo dei ng-enterrisultati linell'essere mostrato per mezzo secondo prima di scomparire.

Sulla base della soluzione di Chris Barr, il mio codice ora ha questo aspetto:

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

So che è una risposta ritardata, ma qui usiamo in MainController:

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

Ma il problema è che quando disabilitiamo tutte le animazioni, l'interfaccia utente è configurata su opacity: 0.

Quindi, è necessario impostare l'opacità su 1 utilizzando CSS:

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

Questo imposterà correttamente l'opacità e l'interfaccia utente funzionerà.