ng-repeat中的新元素动画 [英] New element animation in ng-repeat
问题描述
我使用ng-repeat具有某种风格，我将向数组添加新项目。这是我做的：
I am using ng-repeat with some style and I am going to add new items to the array. This is what I did:
// Code goes here
var _app = angular.module("userApp", [])
_app.controller("usrController", function($scope) {
$scope.usrList = [];
$scope.adduser = function() {
console.log($scope.newUsr)
$scope.usrList.push({
name: $scope.newUsr
})
}
})
/* Styles go here */
.listItem {
border: 1px solid #F00;
background-color: lightgray;
padding: 3px;
border-radius: 5px;
margin: 2px;
width: 100px;
}
<!DOCTYPE html>
<html ng-app="userApp">
<head>
<script data-require="angular.js@1.4.0-rc.2" data-semver="1.4.0-rc.2" src="https://code.angularjs.org/1.4.0-rc.2/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng-controller="usrController">
<input ng-model="newUsr">
<button ng-click="adduser()">Adduser</button>
<ul>
<li class="listItem" ng-repeat="usr in usrList">{{usr.name}}</li>
</ul>
</div>
</body>
</html>
我要为添加的新元素添加stackoverflow效果。当我添加新的元素，它应该褪色或任何其他动画效果，如背景颜色变化。
And I am going to add stackoverflow effect for new elements added. When I add new element, it should fade or any other animation effect like background-color change.
-
如何做到这一点？
How can I do this?
如果改变已经渲染的元素
，有没有办法添加相同的效果？
Is there any way to add same effect if the already rendered element is changed?
推荐答案
您需要使用 ngAnimate 模块并设置 ngRepeat 。
You need to use use ngAnimate module and set up classes for ngRepeat.
首先，将模块包含在项目中（请记住包括相应的脚本标记）：
First, include the module in the project (remember to include corresponding script tag also):
angular.module("userApp", ['ngAnimate'])
然后定义所需的转场/动画。例如：
Then define desired transitions/animations. For example:
.listItem.ng-enter {
opacity: 0;
transition: all .5s ease;
}
.listItem.ng-enter-active {
opacity: 1;
}
演示： http://plnkr.co/edit/2QuyxMt4kiYkKeCoMGCL?p=preview
这篇关于ng-repeat中的新元素动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
