我希望将具有相同类的所有 Div(将 css 属性显示设置为 inline:block)随机一一淡出，直到剩下 1 个最后一个随机 div。我当然可以使用 jquery 做到这一点，但无法使其与 fadeOut inline:block 属性一起使用。
所以我的 div 彼此相邻对齐，就像
我需要将它们随机地一一隐藏。
删除随机div后
删除的 div 空间应保留，如 css 属性 visibility:hidden 中所示，并且剩下的最后一个 div 编号将显示在 JavaScript 警报中。
这是我的凝视代码
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="lib/style.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular-animate.min.js"></script>
<script src="lib/script.js"></script>
</head>
<body class="container" ng-app="animateApp" ng-controller="mainController">
<div class="row">
<div class="col-xs-12">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
</div>
</body>
</html>
这是 fiddle https://plnkr.co/edit/OG1EmWjQi1bHj5OC69Z7?p=info
非常感谢任何帮助。
最佳答案
您可以通过 ng-hide CSS 类定义项目的隐藏方式。您可以重写 display 属性以将其保持为 inline-block，并使用 CSS 动画将其淡出。
// Add your code here
angular.module("animateApp", [])
.controller("mainController", function($scope, $timeout) {
$scope.data = [1, 2, 3, 4, 5];
var hidden = [];
$scope.shouldHide = function(index) {
return hidden.indexOf(index) >= 0;
};
function hideRandom() {
if ($scope.data.length - 1 < hidden.length) {
return;
}
var randomTime = Math.floor(Math.random()*1000)
var randomElem = Math.floor(Math.random()*$scope.data.length);
while (hidden.indexOf(randomElem) >= 0) {
randomElem = Math.floor(Math.random()*$scope.data.length);
}
$timeout(function() {
hidden.push(randomElem);
hideRandom();
}, randomTime);
}
hideRandom();
});/* Add your styles here */
.item{
height:30px;
width:30px;
display:inline-block;
border:1px solid #000000;
}
.item.ng-hide {
transition:0.5s linear opacity;
opacity:0;
display:inline-block !important;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular-animate.min.js"></script>
</head>
<body class="container" ng-app="animateApp" ng-controller="mainController">
<div class="row">
<div class="col-xs-12">
<div class="item" ng-repeat="i in data track by $index" ng-show="!shouldHide(i)">{{i}}</div>
</div>
</div>
</body>
</html>关于javascript - Angular Js用动画一一隐藏Div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38279100/