admin 管理员组

文章数量: 1086019

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?

  • javascript
  • angularjs
  • css
Share Improve this question edited Dec 19, 2016 at 19:31 Laxmikant Dange asked May 19, 2015 at 10:12 Laxmikant DangeLaxmikant Dange 7,7186 gold badges43 silver badges67 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 9

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;
}

Demo: http://plnkr.co/edit/2QuyxMt4kiYkKeCoMGCL?p=preview

本文标签： javascriptNew element animation in ngrepeatStack Overflow

版权声明：本文标题：javascript - New element animation in ng-repeat - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/p/1744084273a2530827.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。