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轻松实现。我真的建议你这样做;

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

在你动态添加背景颜色的评论之后，最好的方法就是通过角度和css关键帧为动画设置内联样式。

CSS -

def my_method?(params)
  # do stuff
end

User.my_method?(params)

HTML -

@-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+ */
  }

View my codepen here

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

OG回答---

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

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

You can view my code pen on it here.

用角度连续制作元素脉冲的颜色

1 个答案: