Question

我正在使用某些样式的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执行此操作？
如果已经渲染的元素，有没有办法添加相同的效果改变了吗？

Answer 1

您需要使用use ngAnimate模块并为ngRepeat设置类。

首先，在项目中包含模块（记住还包括相应的脚本标记）：

no

然后定义所需的过渡/动画。例如：

-Wimplicit

演示： http://plnkr.co/edit/2QuyxMt4kiYkKeCoMGCL?p=preview

ng-repeat中的新元素动画

1 个答案: