Question

我想在用户到达此div时为输入滑块设置动画。要观察用户是否滚动到此div我使用的是指令，它触发了滑块值的更改。这是代码：

directive("scroll", function ($window, $timeout, $interval) {
          return function(scope, element, attrs) {
              angular.element($window).bind("scroll", function() {
                   if (this.pageYOffset >= 1500) {
                     var timeout = $timeout(function(){
                          var interval = $interval(function(){
                            scope.slider += 4;
                          },25);
                      }, 0);
              });
          };
      })

这项工作很好，平滑地增加了价值，但有一个很好的动画效果，但这并没有停止增加。我试着添加：

                      var second_timeout = $timeout(function(){
                        scope.slider= 400;
                      }, 100)

修复一个值，但它“跳跃”然后继续增加。

我还尝试添加一个while循环以避免滑块的值高于500，这有效，但不再有“动画”效果。

我选择了这种方式，这可能看起来很复杂，因为我没有找到任何方法来制作CSS动画。

是否存在纯angularJs函数来指定执行函数的时间量？

感谢您的回答！

Answer 1

您正在定义间隔。该功能将继续运行，这就是为什么它不会停止。

你可以这样做：

var timesRun = 0;
var interval = setInterval(function(){
    timesRun += 1;
    if(timesRun === 60){
        clearInterval(interval);
    }
    scope.slider += 4; 
}, 25);

执行特定时间的函数 - AngularJs

1 个答案: