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="[email protected]" data-semver="1.4.0-rc.2" src=".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>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="[email protected]" data-semver="1.4.0-rc.2" src="https://code.angularjs/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>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?
I do this with css3 only?
Is there any way to add same effect if the already rendered element is changed?
1 Answer
Reset to default 9You 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;
}
Demo: http://plnkr.co/edit/2QuyxMt4kiYkKeCoMGCL?p=preview
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744084272a4555875.html
评论列表（0条）