使用 ngClass 动画随机 CSS 变化

Question

我正在尝试 "animate" div 的 css，方法是随机选择 class。目前我正在使用一个看起来像这样的递归函数：

$scope.spin = function() {
  console.log('spinning');
  var maxCycle = 100;
  var currentCycle = 0;

  recursiveRandomChange();

  function recursiveRandomChange() {
    if (currentCycle <= maxCycle) {
      currentCycle += 1;
      console.log(currentCycle);
      $interval(blockOne(), getRandomTime());
      recursiveRandomChange();
    }
  }

  function blockOne() {
    var currentClass = getRandomClass();
    $scope.engine.one = currentClass;
    console.log('changing color ', currentClass);
  }

};

如您所见，它只允许 100 个周期，但它应该在每次间隔时将 "blockOne"s class ($scope.engine.one) 设置为随机 class完成。我可以在控制台中看到正确记录代码运行但不是随机循环 100 个随机 classes 它只改变一次（从原始颜色到 class 随机选择第 100 次迭代）。

如有任何建议，我们将不胜感激。谢谢！

Answer 1

检查这个：http://jsfiddle.net/pfgkna8k/4/
在 recursiveRandomChange 内部，您也在递归调用 recursiveRandomChange 并使用 $interval。 $interval 本身是递归的。

angular.module('lists', []).controller('ProductList', function($scope, $interval) {
    var getRandomTime = function() {
        return 1000;
    };

    $scope.spin = function() {
        console.log('spinning');
        var maxCycle = 100;
        var currentCycle = 0;

        recursiveRandomChange();

        function recursiveRandomChange() {
            if (currentCycle <= maxCycle) {
                currentCycle += 1;
                console.log(currentCycle);
                $interval(blockOne, getRandomTime());
                //recursiveRandomChange();
            }
        }

        function blockOne() {
            var currentClass = getRandomClass();
            //$scope.engine.one = currentClass;
            var element = document.querySelector("#test");
            element.className = currentClass;
            console.log('changing color ', currentClass);
        }

        function getRandomClass() {
            var classes = ["abc", "abc1", "abc2", "abc3"];
            return classes[Math.round(Math.random() * 3)];
        }

    };
    $scope.spin(); 
});

Answer 2

需要的是$timeout而不是$interval，因为你想每次都改变不同的颜色变化延迟时间。并且你想重复这种随机性 100 次。

$timeout就是做一次。 $interval就是固定间隔做多次

Ayush 的回答中的

$interval(blockOne, getRandomTime()); 没有具体说明 blockOne 会运行多少次。因此，它将永远运行..

我put some logging在Ayush代码中，你会看到随机延迟周期永远不会改变。

您真正想要的是链接 100 $timeout 以便它运行一个接一个但不是并行。

您需要围绕每个 $timeout 包装函数，然后再将它们链接起来。

var changes = [];
changes[0] =  function() {
    return $timeout(setColor,getRandomTime());
}
changes[1] =  function() {
    return $timeout(setColor,getRandomTime());
}
...
// Chain them

changes[0]()
.then(changes[1])
.then(changes[2]);

在这种情况下，您要链接 100 次。我们不必键入 .then() 100 次，因为每个 $timeout.then() 仍然是一个承诺。

var executeChanges = changes[0]().then(changes[1]);
executeChanges = executeChanges.then(changes[2]);

我创建了一个工作 demo

使用 ngClass 动画随机 CSS 变化

Animate random CSS changes with ngClass

javascript

css

angularjs

ng-class