使用 ngClass 动画随机 CSS 变化

Question

我试图通过以随机间隔选择一个随机类来“动画化”一个 div 的 css。目前我正在使用一个看起来像这样的递归函数：

$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”的类 ($scope.engine.one) 设置为随机类。我可以在控制台日志中看到代码运行正确，但不是在随机时间循环通过 100 个随机类，而是只更改一次（从原始颜色到第 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 将运行多少次。因此，它将永远运行..

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

您真正想要的是链接 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