如何在angularjs中使用帶有ng-repeat的動畫

我有一個使用ng-repeat迭代的列表：用戶可以使用向上箭頭和向下箭頭圖標與點擊列表項目進行交互他們我只是改變「列表」中的元素的順序，這是角度建議改變模型和變化自動反映在視圖中。如何在angularjs中使用帶有ng-repeat的動畫

<div ng-repeat="item in list"> 
{{item.name}} 
<div class="icon-up-arrow" ng-click="moveUp($index);"></div> 
<div class="icon-down-arrow" ng-click="moveDown($index);"></div> 
</div>

邏輯在爲moveUp： -

$scope.moveUp= function(position){ 
var temp=list[position-1]; 
list[position-1]=list[position]; 
list[position=temp]; 
};

在上面的代碼工作完全精細和類似是用於移動項目向下的邏輯。但是我想解決的問題是我如何放置動畫？我知道角度自己照顧綁定視圖和模型，但有沒有什麼方法可以放入動畫，因爲視圖更新時按下了向下箭頭圖標？

來源

2013-12-14 Rishul Matta

從馬塞爾的評論繼：在AngularJS 1.2你不需要使用ng-animate指令。相反：

包括angular-animate[-min].js。
使您的模塊取決於ngAnimate。
使用classes like .ng-enter and .ng-enter-active在CSS中定義您的轉換。
像平常一樣使用ng-repeat。

HTML：

<div ng-app="foo"> 
    <!-- Set up controllers etc, and then: --> 
    <ul> 
     <li ng-repeat="item in items">{{item}}</li> 
    </ul>

的JavaScript：

angular.module('foo', ['ngAnimate']); 
// controllers not shown

CSS：

li { 
    opacity: 1; 
} 
li.ng-enter { 
    -webkit-transition: 1s; 
    transition: 1s; 
    opacity: 0; 
} 
li.ng-enter-active { 
    opacity: 1; 
}

Demo in (someone else's) Plunker。

查看docs for $animate瞭解通過各種CSS類進展的詳細信息。

來源

2014-08-28 06:39:58 z0r

將動畫限制爲您感興趣的內容也是一個不錯的主意 - 否則，如果您尚未定義合適的CSS類，最終可能會有元素停留幾秒鐘。見[$ animateProvider.classNameFilter]（https://code.angularjs.org/1.2.26/docs/api/ng/provider/$animateProvider#classNameFilter） – z0r

我發現這個http://plnkr.co/edit/oCLzLHbDLtNT8G8rKFJS ？p =預覽更有用的例子，當在任何索引處插入元素時，給出動畫的概念。 – vinesh

檢查此鏈接http://www.nganimate.org/

您需要的NG-動畫屬性申報有另一個指令，它改變了DOM

div ng-repeat="item in itens" ng-animate="{enter: 'animate-enter', leave: 'animate-leave'}"

您需要添加CSS過渡或元素動畫。

.animate-enter { 
    -webkit-transition: 1s linear all; /* Chrome */ 
    transition: 1s linear all; 
    opacity: 0; 
} 
.animate-enter.animate-enter-active { 
    opacity: 1; 
}

你可以在這裏查看plnkr例如：http://plnkr.co/edit/VfWsyg9d7xROoiW9HHRM

來源

2013-12-14 09:34:27 Rokas

+13

我覺得NG-動畫指令棄用AngularJS 1.2。對於當前NG-重複例子看看這個鏈接http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html#animating-ngrepeat 大多數CSS從nganimate .org雖然仍然是一個很好的入門途徑。 – Marcel

補充了最後的答案，對於動畫的NG-移動類時，爲了改變：

li { 
    opacity: 1; 
} 
li.ng-move { 
    -webkit-transition: 1s; 
    transition: 1s; 
    opacity: 0; 
} 
li.ng-move-active { 
    opacity: 1; 
}

末documentation here。

來源

2014-11-18 14:30:19 clopez

如果因爲減少插件數量而不想使用'ngAnimate'模塊，可以使用ng-init和自定義指令對簡單過渡效果進行歸檔。

<li ng-repeat="item in items" class="item" item-init>{{item.name}}</li> 

.item{ 
    opacity:0; 

    -webkit-transition: all linear 300ms; 
    transition: all linear 300ms; 
} 
.item.visible{ 
    opacity:1; 
} 


myApp.directive('itemInit', function ($compile) { 
    return function (scope, element, attrs) { 
     scope.initItem(element); 
    }; 
});

在您控制器

$scope.initItem = function(el){ 
    $timeout(function(){ 
     angular.element(el).addClass('visible'); 
    },0); 
}

來源

2016-12-27 11:48:06 Jaison

如何在angularjs中使用帶有ng-repeat的動畫

回答

相關問題