Angular Js用动画一一隐藏Div答案

【问题标题】：Angular Js hide Div one by one with animationAngular Js用动画一一隐藏Div
【发布时间】：2016-07-09 06:37:23
【问题描述】：

我希望将所有具有相同类的 Div（css 属性显示设置为inline:block）一个接一个地淡出，直到剩下最后一个随机 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>

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

非常感谢任何帮助。

【问题讨论】：

如果您能够使用 jquery 完成此操作，为什么不创建一个指令并在容器 div 上使用该指令呢？然后你把你的 jquery 代码放在你的指令中。
我无法在保留空白空间的同时使其工作，即当我隐藏 div 时，第三个 div 向左移动

标签： javascript jquery angularjs

【解决方案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>

【讨论】：

谢谢你，但我需要让它在页面加载时自动工作，所以当我运行代码时，随机 div 之一会淡出，一段时间后下一个，你的工作完美，但它是基于点击
编辑了示例@user930026，是否按预期工作？