gpt4 book ai didi

angularjs - 如何在angularjs中一个一个地列出名字

转载 作者:太空宇宙 更新时间:2023-11-04 11:35:57 26 4
gpt4 key购买 nike

HTML

<ul class="ul_nav">
<li ng-repeat="teams in teamArray"
style="-webkit-animation-delay: {{$index * 150}}ms">
{{teams.team_name}}
</li>
</ul>

在这里我可以列出团队。但是我需要一个一个地显示(列出)团队。如何赋予这种效果。 Plunker

最佳答案

您可以使用 $timeout 让您的动画在页面加载时工作。

var app = angular.module('myApp', ['ngAnimate']);
app.controller('myCtrl', function($scope, $timeout) {
$timeout(function() {
$scope.teamArray = [{
"team_name": "A"
}, {
"team_name": "B"
}, {
"team_name": "C"
}];
});

$scope.change = function() {
$scope.teamArray = [{
"team_name": "D"
}, {
"team_name": "E"
}, {
"team_name": "F"
}];
};
});
.stagger-demo.ng-enter {
opacity: 0;
padding-left: 30px;
transition: all ease 250ms;
}
.stagger-demo.ng-enter-stagger {
transition-delay: 0.5s;
-webkit-transition-delay: 0.5s;
transition-duration: 0s;
-webkit-transition-duration: 0s;
}
.stagger-demo.ng-enter-active {
opacity: 1.0;
padding-left: 0px;
}
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular-animate.js"></script>
</head>

<body ng-app="myApp" ng-controller="myCtrl">
<button ng-click="change()">Other Data</button>
<ul class="ul_nav">
<li class="stagger-demo" ng-repeat="teams in teamArray">
{{teams.team_name}}
</li>
</ul>
</body>


此处概述了另一种选择:

https://github.com/angular/angular.js/issues/5130

他指出这是一个“肮脏的黑客”。

这里也提到了:

https://github.com/angular/angular.js/issues/10536

var app = angular.module('myApp', ['ngAnimate']);
app.controller('myCtrl', function($scope, $rootElement) {
$scope.teamArray = [{
"team_name": "A"
}, {
"team_name": "B"
}, {
"team_name": "C"
}];
$rootElement.data("$$ngAnimateState").running = false;
});
.stagger-demo.ng-enter {
opacity: 0;
padding-left: 30px;
transition: all ease 250ms;
}
.stagger-demo.ng-enter-stagger {
transition-delay: 0.5s;
-webkit-transition-delay: 0.5s;
transition-duration: 0s;
-webkit-transition-duration: 0s;
}
.stagger-demo.ng-enter-active {
opacity: 1.0;
padding-left: 0px;
}
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular-animate.js"></script>
</head>

<body ng-app="myApp" ng-controller="myCtrl">
<ul class="ul_nav">
<li class="stagger-demo" ng-repeat="teams in teamArray">
{{teams.team_name}}
</li>
</ul>
</body>

关于angularjs - 如何在angularjs中一个一个地列出名字,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31758618/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com