javascript - 使用 Angular 使元素的颜色连续脉冲

Question

我正在尝试使按钮的颜色从其当前颜色(例如 #ed8c55)变为纯白色并返回到原始颜色，整个循环大约需要 2-3 秒。我怎么能那样做？

特别是，我看到这里有几个问题。一种是制作计时器并将一些变量的增量附加到颜色值。第二个问题是实际颜色本身。如何使用某种循环不断地将十六进制颜色变为白色和变回白色？

我实现了以下计时秒数的计时器。我可以很容易地修改它以计算毫秒或类似的东西。

var mytimeout = null; // the current timeoutID
    $scope.counter = 0;

    // actual timer method, counts up every second
        $scope.onTimeout = function() {

        $scope.counter++;
        mytimeout = $timeout($scope.onTimeout, 1000);
    };

感谢任何帮助。

Answer 1

我知道您想要通过 AngularJS 制作动画，但我认为这不是完成这项工作的正确工具，因为仅通过 CSS 即可轻松实现。我真的建议你这样做；

编辑--------------------

在您评论动态添加背景颜色之后，最好的方法是通过动画的 Angular 和 css 关键帧来内联样式颜色。

CSS--

@-webkit-keyframes pulse {
  25% { background-color: #FFF; }  
}

@-moz-keyframes pulse {
  25% { background-color: #FFF; }  
}

@-o-keyframes pulse {
  25% { background-color: #FFF; }
}

@keyframes pulse { 
  25% { background-color: #FFF; } // changed to 25% to stop the sudden change to white
}

.element {
    transition: background-color 3s;
    width: 50px;
    height: 50px;
    -webkit-animation: pulse 3s infinite; /* Safari 4+ */
    -moz-animation:    pulse 3s infinite; /* Fx 5+ */
    -o-animation:      pulse 3s infinite; /* Opera 12+ */
    animation:         pulse 3s infinite; /* IE 10+, Fx 29+ */
  }

HTML -

<div style="background-color: #ed8c55;" class="element"></div>

View my codepen here

/编辑 ------------------

OG 回答---

  @-webkit-keyframes pulse {
    0% { background-color: #ed8c55; }
    50% { background-color: #FFF; }
    100% { background-color: #ed8c55; }
  }

  @-moz-keyframes pulse {
    0% { background-color: #ed8c55; }
    50% { background-color: #FFF; }
    100% { background-color: #ed8c55; }
  }

  @-o-keyframes pulse {
    0% { background-color: #ed8c55; }
    50% { background-color: #FFF; }
    100% { background-color: #ed8c55; }
  }

  @keyframes pulse {
    0% { background-color: #ed8c55; }
    50% { background-color: #FFF; }
    100% { background-color: #ed8c55; }
  }

  .element {
    width: 50px;
    height: 50px;
    background: #ed8c55;
    -webkit-animation: pulse 3s infinite; /* Safari 4+ */
    -moz-animation:    pulse 3s infinite; /* Fx 5+ */
    -o-animation:      pulse 3s infinite; /* Opera 12+ */
    animation:         pulse 3s infinite; /* IE 10+, Fx 29+ */
  }

这将在两种颜色之间不断循环。

You can view my code pen on it here.