Angular Js hide Div one by one with animation

Question

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 and I would need to hide them randomly one by one.

After a random div is removed 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.

If you're able to accomplish this using jquery, why not create a directive and use that directive on the container div? You cah then put your jquery code in your directive. — Matt M
– Matt M, Commented Jul 11, 2016 at 14:58
I am unable to get it work while retaining the empty space i.e. when I hide the div the third div shifts to left — user930026
– user930026, Commented Jul 11, 2016 at 15:15

Nicholas Anderson · Accepted Answer · 2016-07-11 15:46:03Z

5

+50

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>

edited Jul 11, 2016 at 15:46

answered Jul 11, 2016 at 15:22

Nicholas Anderson

4042 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user930026 Over a year ago

Thank you but I need to make it work automatically on page load , so when I run the code one of the random div fades out and after some time the next one , Yours works PERFECTLY but it is based on click

Nicholas Anderson Over a year ago

Edited the sample @user930026, does that work as intended?

Collectives™ on Stack Overflow

Angular Js hide Div one by one with animation

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related