Question

我正在使用渐变和色标编写自定义进度栏。

请参阅示例：https://stackblitz.com/edit/angular-progress-bar-gradient

我要解决的问题是动画非常“跳跃”。我要设置进度条的动画，使其逐渐平滑地填充，而不是立即跳到新位置。

我尝试将transition: all 0.4s ease-in;添加到我的按钮上，但这似乎根本不影响渐变。

Component.ts

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>

Component.css

.btn {
  height: 50px;
  box-shadow: none;
}
.btn[disabled] {
  cursor: default;
}
.btn.launch-btn {
  border: none;
  transition: all 0.4s ease-in;
  width: 500px;
}

Answer 1

Gradients don't support transition.

为什么不提高分辨率？这样您就可以得到想要的行为。

Demo， Project

用色标对角动态进度栏渐变进行动画处理

1 个答案: