Угловые Js скрыть Div один за другим с анимацией

Я ищу fadeout все Div (с отображением свойств css, установленным на inline:block) с одним и тем же классом случайным образом по одному, пока не останется 1 последний случайный div. Я, конечно, могу сделать это с помощью jquery, но я не могу заставить его работать с fadeOut inline: block.Угловые Js скрыть Div один за другим с анимацией

Так что мой div выровнен рядом друг с другом, как и мне нужно будет скрыть их случайным образом по одному.

После случайного ДИВ удаляется снятую DIV пространство должно быть сохранено как в CSS собственности видимость: скрытый и последний номер 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

Любая помощь очень ценится.

источник

2016-07-09 user930026

Если вы в состоянии сделать это, используя JQuery, почему бы не создать директиву и использовать эту директиву на контейнер DIV? Тогда вы cah помещаете свой код jquery в свою директиву. –

Я не могу заставить его работать, сохраняя пустое пространство, т. Е. Когда я скрою div, третий сдвиг div влево – user930026

Вы можете определить, как элементы скрыты в классе CSS ng-hide. Вы можете переопределить атрибут 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>

источник

2016-07-11 15:22:09

Спасибо, но мне нужно заставить его работать автоматически при загрузке страницы, поэтому, когда я запускаю код, один из случайных div исчезает, и через некоторое время следующий, ваш работает ОТЛИЧНО, но он основан на щелчке – user930026

Отредактирован образец @ user930026, это работает так, как предполагалось? –

Угловые Js скрыть Div один за другим с анимацией

ответ

Смежные вопросы