Ng-yinelemesinde yeni öğe animasyonu

Bazı stillerde ng-repeat kullanıyorum ve diziye yeni öğeler ekleyeceğim.Ng-yinelemesinde yeni öğe animasyonu

// 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>

Ve yeni unsurlar eklendi için stackoverflow efekt eklemek için gidiyorum: Bu benim yaptığım budur. Yeni öğe eklediğimde, solgunluk veya arka plan rengi değişimi gibi başka bir animasyon efekti oluşmalı.

Bunu nasıl yapabilirim?
Bunu yalnızca css3 ile yapıyorum?
Önceden oluşturulan öğe değiştirilirse, aynı efekti eklemenin herhangi bir yolu var mı?

kaynak

2015-05-19 Laxmikant Dange

Sen kullanacağım ngAnimate modülü kullanmak ve ngRepeat için sınıfları kurmak gerekir.

İlk olarak, projede modülü içerir (aynı zamanda karşılık gelen komut etiketini dahil unutmayın):

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

Daha sonra arzu edilen geçişler/animasyonlar tanımlar. Örneğin:

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

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

kaynak

2015-05-19 10:24:51 dfsq

yapardın Bu nasıl bir fade ile üstündeki yeni bir öğe ekleyerek olsaydı? – LastTribunal

Ng-yinelemesinde yeni öğe animasyonu

cevap

İlgili konular