desabilitar nganimate para alguns elementos

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 à class de elemento que você deseja desativar. Exemplo:

Se você deseja habilitar animações para elementos específicos (em vez de desabilitá-las para elementos específicos), você pode usar o $ animateProvider para configurar elementos com um nome de class específico (ou regex) para animar.

O código abaixo ativará animações para elementos que possuem a class de angular-animate :

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

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

 
  
 {{item}} 
  

Exemplo de Plunker emprestado e modificado a partir deste blog, onde apenas o primeiro filtro tem animações (devido à class angular-animate ).

Por favor, note que eu estou usando angular-animate como um exemplo e é completamente configurável usando a function .classNameFilter .

Há duas maneiras de descomprimir animações em AngularJS se você tiver o módulo ngAnimate como uma dependência em 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 o angular adicione as classs css do animationstate (por exemplo, ng-enter, …)!

    $animate.enabled(false, theElement); 

A partir da versão 1.4 do Angular, você deve inverter os argumentos:

 $animate.enabled(theElement, false); 

Documentação para $animate .

obrigado, eu 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); }; }); 

Para desabilitar ng-animate para certos elementos, usando uma class CSS, que segue o paradigma Animate angular, você pode configurar o ng-animate para testar a class usando regex.

Config

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

Uso

Simplesmente inclua a class ng-animate-disabled em qualquer elemento que você queira que seja ignorado pelo ng-animate.

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

Descobri que $animate.enabled(false, $element); irá trabalhar para elementos que usam ng-show ou ng-hide mas não funcionará para elementos que usam ng-if por algum motivo! A solução que acabei usando foi apenas fazer tudo em CSS, que aprendi com esse 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 ngAnimate no meu ng-if , então isso seria a minha solução:

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

Apenas postando isso como outra sugestão!

Eu tenho uma lista da qual o primeiro li está oculto usando ng-hide="$first" . Usar ng-enter resulta no li sendo mostrado por meio segundo antes de desaparecer.

Baseado na solução de Chris Barr, meu código agora se parece com isto:

HTML

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 nós 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 .

Então, é necessário definir a opacidade para 1 usando CSS:

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

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