我是angularjs的新手,想要對每個ng-repeat元素應用500ms的延遲。下面的plunker中的代碼是我正在尋找的確切的東西,但它不適用於最新版本的角色js(1.4.8)。以下網站還介紹瞭如何應用延遲,但有點混淆,關於add-active和-remove。如何應用延遲顯示ng-repeat元素
這裏是HTML,CSS和角代碼
<script>
var m = angular.module('App', []);
m.controller('ExampleCtrl', function($scope) {
$scope.items = [];
$scope.addItems = function() {
$scope.items = [
{name: "Apple"},
{name: "Orange"},
{name: "Banana"},
{name: "Lemon"},
{name: "Lime"},
{name: "Melon"},
{name: "Tangerine"}
];
}
});
</script>
ul {
list-style-type: none;
position:relative;
}
li {
background-color:#e3e3e3;
color: #666;
font-family:Arial;
padding:1em;
margin:0 5px 5px 5px;
text-align: center;
text-transform: uppercase;
}
.insert-enter {
-webkit-transform:scale(0);
-webkit-transition-property: all;
-webkit-transition-timing-function: ease-out-cubic;
-webkit-transition-duration: 400ms;
}
.insert-enter.insert-enter-active {
-webkit-transform:scale(1);
}
</style>
<ul>
<li ng-repeat="item in items"
ng-animate="{enter:'insert-enter'}"
style="-webkit-transition-delay:{{$index * 500}}ms"
>
{{item.name}}
</li>
</ul>
website about ng-repeat classes
謝謝你的幫助和節省我的時間:) –
很高興我能幫忙! – linktoahref