Estou usando o módulo ngAnimate, mas todos os meus ng-if
, ng-show
, etc, são afetados por isso, eu quero aproveitar ngAnimate para alguns elementos selecionados. Para performance e alguns bugs em elementos que mostram e escondem muito rapido.
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
à 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:
Desative ou ative a animação globalmente no serviço $ animate:
$animate.enabled(false);
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á.