javascript - 使用 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(); 
});