CODEWITHSUNDEEP
javascriptjqueryangularjs
user930026
user930026

Reputation: 1657

Angular Js hide Div one by one with animation

I am looking to fadeout all Div (with css property display set to inline:block) with same class randomly one-by-one until 1 last random div remains. I am certainly able to do it with jquery but I am unable to make it work with fadeOut inline:block property.

So my div are aligned next to each other like enter image description here and I would need to hide them randomly one by one.

After a random div is removed enter image description here the removed div space should be retained as in css property visibility:hidden and the last div number which is left will be shown in JavaScript alert.

Here is my staring code

<!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>

Here is the fiddle https://plnkr.co/edit/OG1EmWjQi1bHj5OC69Z7?p=info

Any help is really appreciated.

Upvotes: 2

Views: 347

Answers (1)

Nicholas Anderson
Nicholas Anderson

Reputation: 404

You can define how items are hidden through the ng-hide CSS class. You can override the display attribute to keep it as inline-block, and use CSS animations to fade it away.

// 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>

Upvotes: 5

Related Questions