Question

我希望逐个淡出所有Div（css属性显示设置为inline:block），同一个类一个接一个，直到最后一个随机div为止。我当然可以用jquery做到这一点，但我无法使用fadeOut 内联：块属性。

所以我的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>

这是小提琴https://plnkr.co/edit/OG1EmWjQi1bHj5OC69Z7?p=info

非常感谢任何帮助。

Answer 1

您可以通过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>

Angular Js用动画逐个隐藏Div

1 个答案: