Hoạt ảnh phần tử mới trong ng-repeat

Tôi đang sử dụng ng-repeat với một số kiểu và tôi sẽ thêm các mục mới vào mảng. Đây là những gì tôi đã làm:Hoạt ảnh phần tử mới trong 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="[email protected]" 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>

Và tôi sẽ thêm hiệu ứng stackoverflow cho các yếu tố mới được thêm vào. Khi tôi thêm phần tử mới, nó sẽ mờ dần hoặc bất kỳ hiệu ứng động nào khác như thay đổi màu nền.

Tôi làm cách nào để thực hiện việc này?
Tôi làm điều này với chỉ css3?
Có cách nào để thêm hiệu ứng tương tự nếu phần tử đã hiển thị bị thay đổi không?

Nguồn

2015-05-19 Laxmikant Dange

Bạn cần sử dụng mô-đun ngAnimate và thiết lập lớp học cho ngRepeat.

Thứ nhất, bao gồm các module trong dự án (nhớ để bao gồm tương ứng thẻ script cũng):

angular.module("userApp", ['ngAnimate'])

Sau đó định nghĩa trạng thái mong muốn/hình ảnh động. Ví dụ:

.listItem.ng-enter { 
    opacity: 0; 
    transition: all .5s ease; 
} 
.listItem.ng-enter-active { 
    opacity: 1; 
}

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

Nguồn

2015-05-19 10:24:51 dfsq

Làm thế nào bạn sẽ làm điều đó nếu bạn đã bổ sung thêm một mục mới ở trên cùng với một fade in? – LastTribunal

Hoạt ảnh phần tử mới trong ng-repeat

Trả lời

Các vấn đề liên quan