爲某些元素禁用nganimate

Question

我正在使用ngAnimate模塊，但是我所有的ng-if，ng-show等都受此影響，我想爲某些選定的元素使用ngAnimate。 用於表現和隱藏非常快速的元素中的一些錯誤。

謝謝。

Answer 1

只需添加到您的CSS。最好如果是最後一條規則：

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

然後將no-animate添加到要禁用的元素的類中。例如：

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

Answer 2

有兩種方法可以確定停用動畫在AngularJS如果你有模塊ngAnimate爲您的模塊的依賴關係：

1. 禁用或在$有生服務全局啓用動畫：

   $animate.enabled(false); 
   

2. 禁用特定元素的動畫 - 這必須是該角的元素將添加animationstate css類（例如ng-enter，...）！

   $animate.enabled(false, theElement); 
   

---

由於角1.4版本，你應該扭轉參數：

$animate.enabled(theElement, false); 

---

的文檔$animate：https://docs.angularjs.org/api/ng/service/ $動畫

Answer 3

感謝，我寫了一個指令哪個y您可以同時在元件上放置

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

Answer 4

如果要啓用特定元素的動畫（而不是禁用它們的特定元素）可以使用$animateProvider來配置具有特定類名稱（或正則表達式）的元素進行動畫處理。

下面的代碼將使對於具有angular-animate類元素的動畫：

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

下面是示例標記包括所述angular-animate類，以使動畫：

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

Plunker例如借用和改性從this blog只有第一個過濾器有動畫（由於有angular-animate類）。

請注意，我使用的是angular-animate作爲示例，它可以使用.classNameFilter函數完全配置。

Answer 5

我發現，$animate.enabled(false, $element);將針對使用ng-show或ng-hide但元素的工作將無法正常工作對於使用ng-if出於某種原因元素！我最終使用的解決方案是在CSS中完成，我從this thread on 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; 
    } 
} 

Answer 6

要禁用NG-動畫的某些元素，使用CSS類，這是繼角動畫模式，您可以配置NG-動畫使用正則表達式來測試這個類。

配置

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

使用

只需將ng-animate-disabled類添加到要通過NG-動畫被忽略的任何元素。

---

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

Answer 7

我有從該第一li使用ng-hide="$first"隱藏列表。使用ng-enter結果li在消失前顯示半秒鐘。

基於克里斯·巴爾的解決方案，我的代碼現在看起來像這樣：

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

Answer 8

我做不要使用ngAnimate在我的ng-if的，所以這個喔ld是我的解決方案：

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

只是發佈這個作爲另一個建議！

Answer 9

我知道這是一個延遲的答覆，但在這裏我們MainController使用：

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

但問題是，當我們關閉所有的動畫，用戶界面，選擇配置爲opacity: 0。

因此，它需要使用CSS設置不透明度爲1：

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

這將正確設置不透明度和UI選會工作。