desabilitar nganimado para alguns elementos

Estou usando o módulo ngAnimate, mas toda a minha ng-if, ng-show, etc, são afetados por isso, eu quero alavancagem ngAnimate para alguns elementos selecionados. Para desempenho e alguns bugs em elementos que se mostram e se escondem muito rápidos.

obrigado.

Basta adicionar isso ao seu CSS. É melhor se for a última regra:

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

em seguida, adicione no-animateà classe de elemento que deseja desativar. Exemplo:

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

Se você deseja habilitar animações para elementos específicos (ao invés de desabilitá-los para elementos específicos), você pode usar o $ animateProvider para configurar elementos com um nome de classe particular (ou regex) para animar.

O código a seguir habilitará animações para elementos que possuem a angular-animateclasse:

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

Aqui está um exemplo de marcação que inclui a angular-animateclasse para habilitar animações:

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

Exemplo do Plunker emprestado e modificado deste blog onde apenas o primeiro filtro tem animações (devido a ter a angular-animateclasse).

Observe que estou usando angular-animatecomo exemplo e é totalmente configurável usando a .classNameFilterfunção.

Existem duas maneiras de distribuir animações em AngularJS se você tiver o módulo ngAnimate como uma dependência do seu módulo:

1. Desative ou ative a animação globalmente no serviço $ animate:

   $animate.enabled(false);

2. Desabilite as animações para um elemento específico - este deve ser o elemento para que angular adicionará as classes css de animationstate (por exemplo, ng-enter, ...)!

   $animate.enabled(false, theElement);

Na versão Angular 1.4, você deve inverter os argumentos:

$animate.enabled(theElement, false);

Documentação para$animate .

Para desativar o ng-animate para certos elementos, usando uma classe CSS, que segue o paradigma Angular animate, você pode configurar o ng-animate para testar a classe usando regex.

Config

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

Uso

Simplesmente adicione a ng-animate-disabledclasse a qualquer elemento que deseja ignorar pelo ng-animate.

Crédito http://davidchin.me/blog/disable-nganimate-for-selected-elements/

obrigado, escrevi uma diretiva que você pode colocar no 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);
    };
});

Descobri que $animate.enabled(false, $element);funcionará para elementos que usam ng-showou, ng-hidemas não funcionará para elementos que usam ng-ifpor algum motivo! A solução que acabei usando foi apenas fazer tudo em CSS, o que aprendi neste tópico no 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;
  }
}

Eu NÃO quero usar o ngAnimate no meu ng-if, então esta seria a minha solução:

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

Apenas postando isso como mais uma sugestão!

Eu tenho uma lista da qual o primeiro liestá oculto usando ng-hide="$first". Usando ng-enterresulta em liser mostrado por meio segundo antes de desaparecer.

Com base na solução de Chris Barr, meu código agora se parece com este:

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

Eu sei que é uma resposta atrasada, mas aqui usamos no MainController:

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

Mas o problema é que quando desabilitamos todas as animações, o ui-select é configurado para opacity: 0.

Portanto, é necessário definir a opacidade para 1 usando CSS:

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

Isso definirá a opacidade corretamente e o ui-select funcionará.