Angular JS：指令提供的臨時禁用動畫，因此它在頁面加載時不動畫？

如題，請參閱此琴：Angular JS：指令提供的臨時禁用動畫，因此它在頁面加載時不動畫？

我已經添加了下面的代碼指令：

myApp.directive('ngFadeIn', function() { 
    return function(scope, element, attr) { 
    if (element.is('tr, tbody')) { 
     element.find('td').effect("highlight", {}, 500); 
    } else { 
     element.effect("highlight", {}, 500); 
    } 
    return scope.destroy = function(complete) { 
     return element.fadeOut(500, function() { 
     if (complete) { 
      return complete.apply(scope); 
     } 
     }); 
    }; 
    }; 
});

我的問題是第一次加載頁面的時候，因爲我已經在ng-repeat元素中應用了指令，所有的項目在第一次加載頁面時都得到了高亮效果（閃爍一次）。我怎樣才能跳過這種效果沒有太多的破解（理想情況下，在指令內完成的一切）

來源

2013-02-22 William Yeung

有趣的是，我不確定是否有一個簡單，乾淨的解決方案。看起來，ngRepeatDirective的構建不關心轉發器是否第一次運行，或者只是將新項目添加到列表中。因此，它不會讓你採取不同的行動。 AngularUI的ui-animate指令似乎也沒有解決這個問題，所以我不確定這是否現在可行，而不訴諸討厭的超時。

你可以做的是修改ngRepeatDirective來檢查類似於ng-repeat-finished屬性的東西，並在中繼器完成後執行該屬性。然後添加邏輯以避免第一個中繼器上的動畫應該是微不足道的。

順便說一句，你不應該用ng前綴命名你的指令，因爲這是Angular在內部使用的。您應該爲您的應用程序提供自己的前綴。

來源

2013-02-22 08:04:03

如果我們可以確定頁面第一次完成渲染的時間，那麼我們可以在服務或rootScope上設置一些屬性，您的指令可以注入該屬性，因此可以檢查該屬性以確定是否應用動畫。

不幸的是，似乎沒有辦法確定頁面何時完成呈現。見AngularJS - How to query the DOM when directive rendering is complete，這是解決同樣的問題。

我能想到的唯一解決方法是創建另一個指令（在頁面上使用它一次），它將使用$ timeout來簡單地延遲1秒左右，然後執行上面提到的操作：在服務上設置一些屬性或rootScope。你的fadeIn指令會監視那個屬性/變量，當這個值改變時，它可以設置一些允許或阻止動畫的本地屬性/布爾值/標誌。

來源

2013-02-24 04:20:13

我會檢查角度的內置動畫剛剛在version 1.1.14發佈。以下是關於新功能的精彩文章：Animation in AngularJS。特別是我會檢查「有條件地啓用/禁用動畫」部分。從他們的網站：

JS：

//turn on the animation 
$scope.myAnimation = { enter: 'cool-enter', leave: 'cool-leave' }; 

//change the animation 
$scope.myAnimation = { enter: 'uncool-enter', leave: 'uncool-leave' }; 

//remove the animation 
$scope.myAnimation = null;

HTML：

<div data-some-directive data-ng-animate="myAnimation"></div>

再次注意，這需要角度JS 1.1.14

來源

2013-04-13 15:10:06

是的不幸的是，我們可能需要穩定版本，因爲有很多指令在1.1.x上不起作用 – 2013-04-18 09:19:21

的當前版本不穩定，我有同樣的問題使用角1.4.9。我不希望第一次發生ng-repeat動畫。我發現，使這項工作的唯一方法是對NG-重複父母的自定義指令，並在短時間內禁用動畫：

(function(){ 
    'use strict'; 

    angular 
    .module('directives') 
    .directive('disableLoadingAnimation', disableLoadingAnimation); 

    function disableLoadingAnimation($animate, $timeout) { 
    var directive = { 
     link: link, 
     restrict: 'A' 
    }; 
    return directive; 

    function link(scope, element) { 
     $animate.enabled(element, false); 
     $timeout(function(){ 
     $animate.enabled(element, true); 
     }, 1000); 
    } 
    } 
})();

HTML

<table disable-loading-animation> 
    <tr ng-repeat="line in lines">...</tr> 
</table>

我不喜歡事實上，我必須設置1000毫秒的延遲，但這是迄今爲止我找到的更清晰的方式。

來源

2016-02-05 14:28:43 mchasles

Angular JS：指令提供的臨時禁用動畫，因此它在頁面加載時不動畫？

回答

相關問題