Javascript 使用颜色停止设置角度动态进度条渐变的动画

我正在编写一个使用渐变和颜色停止的自定义进度条

见示例：

我试图解决的问题是动画非常“跳跃”。我想动画的进度条，使其充满顺利，逐步而不是立即跳到新的位置

我尝试添加

transition:all 0.4s ease in到我的按钮，但这似乎根本不会影响渐变

组件技术

import { Component, VERSION } from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  name = "Angular " + VERSION.major;
  progressStyle = "#18191C";

  constructor() {
    const me = this;

    let perc = 0;
    setInterval(() => {
      me.progressStyle = `linear-gradient(90deg, #8354C1 ${perc}%, #18191C ${perc}%)`;
      perc += 5;
      if (perc >= 100) {
        perc = 0;
      }
    }, 300);
  }
}

Component.html

<button type="button" class="btn btn-secondary launch-btn" [style.background]="progressStyle">
  Testing
</button>


为什么不提高分辨率？所以你可以得到你想要的行为

,，
同一个问题重复了两次，删除其中一个原因两个原因，一个是通过websocket从另一个应用程序发送的百分比。使用更高的分辨率，呼叫数量会增加几个数量级。其次，你的演示对我来说也很重要。然后你必须用其他方式来处理这个问题。例如，
元素内部可能有不同的浮动元素。您可以通过更改该元素的“
width
”值来“
transition
”传入金额。是的，我将尝试使用另一个宽度刚刚增加的div。谢谢你的建议。我可以建议以下加快你的工作速度：它包含
.progress
元素中的
.progress bar
。
.btn {
  height: 50px;
  box-shadow: none;
}
.btn[disabled] {
  cursor: default;
}
.btn.launch-btn {
  border: none;
  transition: all 0.4s ease-in;
  width: 500px;
}