Lax*_*nge 7 javascript css3 angularjs
我正在使用某些样式的ng-repeat,我将向数组添加新项目.这就是我做的:
// 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效果.当我添加新元素时,它应该淡出或任何其他动画效果,如背景颜色更改.
我怎样才能做到这一点？
我只用css3做这件事吗？
如果已经渲染的元素被更改,有没有办法添加相同的效果？
您需要使用use ngAnimatemodule并为其设置类ngRepeat.
首先,在项目中包含模块(记住还包括相应的脚本标记):
angular.module("userApp", ['ngAnimate'])
然后定义所需的过渡/动画.例如:
.listItem.ng-enter {
opacity: 0;
transition: all .5s ease;
}
.listItem.ng-enter-active {
opacity: 1;
}
演示: http ://plnkr.co/edit/2QuyxMt4kiYkKeCoMGCL？p = preview