AngularJS動畫基本ng-repeat滑塊

基本上是有一種簡單的方法來利用ng-repeat指令中的ng-enter和ng-leave掛鉤爲左右基本滑塊設置動畫效果？AngularJS動畫基本ng-repeat滑塊

你可以看到plunk here這幾乎工作。

我有一個基本的滑塊，使用分區過濾器和ng-repeat一次一頁地轉換元素列表。除非切換方向，否則這種方式會按預期工作，在這種情況下，前一個方向上的ng-leave轉換運行會導致錯誤的結果。

我可以編寫自定義滑塊指令，甚至可以使用angular-ui旋轉木馬，但如果確實存在一個簡單的解決方案，我不想過分複雜化這樣一個簡單的示例。任何幫助將非常感激。

來源

2014-06-20 adamK

此截圖顯示了問題，並指出瞭解決方案。

angular-animate.js

傳遞給動畫休假功能的元件有老人類值。

奇怪的是，我還沒有能夠複製這個截圖，因爲$scope神祕地變得不可用。 $rootScope始終可用。但它似乎你可以做到這一點，而不注入$rootScope。

我的解決辦法是這樣的：

裝點$animate.leave函數是這樣的：

.config(function($provide) { 
    $provide.decorator("$animate", function ($delegate, $rootScope) { 
     $delegate.originalLeave = $delegate.leave; 
     $delegate.leave = function (element, doneCallback) { 
      // THIS IS THE ADDITIONAL FUNCTIONALITY 
      $(element).removeClass("right").removeClass("left").addClass($rootScope.direction); 
      $delegate.originalLeave(element, doneCallback); 
     }; 
     return $delegate; 
    }); 
})

然後放在$rootScope的direction變量，這當然將需要被注入到控制器。

該解決方案需要jQuery，但是如果沒有它，很容易實現。

Here is the working Plunker

來源

2014-06-20 05:07:29 david004

您是正確的，傳遞給離開函數的元素具有舊的方向值，因爲它是「離開」元素的類（或方向）。然而，該解決方案的問題在於，修改AngularJS模塊的'angular-animate'可能會影響應用程序中的其他'leave'動畫，並且也意味着您不能在不進行相同更改的情況下更新到新版本。我希望有一個簡單的解決方案，也許沒有一個。 – adamK

我們可以如新答案中所示修飾$ animate服務。這是非常正常的做法，只要我們對裝飾的實施情況有所瞭解，就不會破壞任何東西。此外，多一點工作，我敢肯定，我們可以做到這一點沒有$ rootScope或jQuery。 – david004

這是一個聰明的方式來做到這一點，將開始玩這個，看看我們如何去。看起來這麼簡單的問題並不容易解決。如果沒有什麼比較簡單的話，我會標記爲答案，這是一個很好的解決方案，感謝幫助！ – adamK

使用ng-fx!文檔和安裝指令，可以發現here

下面是如何將其與NG-重複使用的例子：

<ul ng-controller="FoodController"> 
    <li class='fx-fade-down fx-speed-800 fx-easing-bounce' ng-repeat="food in foods"> 
    {{ food }} 
    </li> 
</ul>

這將使用FX-淡出下來效果在重複的項目，在800毫秒，與'緩和'反彈。

另外「需要注意的是NG重複不會觸發在網頁加載時的動畫，你遍歷集合必須先再填充空的，你可以用一個簡單的超時或一些其它的異步操作實現這一目標」：

angular.module('foodApp', ['ngAnimate', 'fx.animations']) 
.controller('FoodController', function($scope, $timeout){ 
    $timeout(function(){ 
    $scope.foods = ['apple', 'muffin', 'chips']; 
    }, 100); 
});

來源

2014-06-20 01:15:23 JoshSGman

從文檔我沒有看到NG-fx'如何解決'這一特定問題，它可以應用在進入和離開的動畫，但我需要不是基於靜態類不同的動畫。是否可以修改Plunk以顯示你的意思？我希望只使用CSS動畫，而不必包含GSAP庫（但我知道這些優點），但如果能夠應用它，歡迎考慮這一點，歡呼。 – adamK

我會嘗試重新編輯！ – JoshSGman

AngularJS動畫基本ng-repeat滑塊

回答

相關問題