css - 模块化进度条

Question

我正在尝试制作一个可以像这样使用的模块化动画进度条:

<bar [type]="'health'" [percentage]="'80'"></bar>

我需要设置不同的百分比。它不需要是完全动态的，只需在页面加载后将栏填充到我上面指定的 X 百分比。

*bar.component.html*
<div class="bar-wrapper">
  <div class="bar-label">CSS</div>
  <div class="bar-container">
    <div class="bar-fill" [style.width.%]="percentage" [@barAnimation]="state"></div> <!-- Tried several ways to set the CSS but it remains how I define it in the SCSS file. -->
    <div class="bar-percentage">{{percentage}}</div>
  </div>
</div>

bar.component.ts

@Component({
  selector: 'bar',
  templateUrl: './bar.component.html',
  styleUrls: ['./bar.component.scss'],
  animations: [
    trigger('barAnimation', [
      state('collapsed, void', style({ width: '0%'})),
      state('expanded', style({ width: '*'})), // <--- the width needs to be altered for each component.
      transition('* => expanded', [animate("4s cubic-bezier(0, -0.75, 0.25, 1)")])
  ])]
})
export class BarComponent implements OnInit {

  public state = "expanded";

  @Input() public type: String;
  @Input() public percentage: String;

  constructor() { }

  ngOnInit() {
    console.log(this.type + ", " + this.percentage);
  }

  public startAnimation() {
    this.state = "expanded";
  }
}

在摆弄这个问题太久之后，我认为 * 应该在 width 属性上解决这个问题。我可以手动更改我的 scss 文件，该栏可以正常工作。所以我想我只需要以某种方式设置 CSS 宽度属性。

Answer 1

去掉 barAnimation。你正在使它变得比它需要的更复杂。 :)

只需在宽度上使用简单的 CSS 过渡。下面是一些伪代码，可以让您朝着正确的方向前进:

CSS:

.bar {
    transition: width .5s ease;
    width: 0;
    height: 2px;
    background-color: green;
}

模板:

<div class="bar" [style.width.px]="width"></div>

组件:

@Component({...})
export class BarComponent {
    @Input() width: number = 0;
}

只要 width 属性被修改，条形宽度就会增加，并且会根据 CSS 中的过渡以动画样式增加。

---

要测试它，只需设置一个计时器并将宽度增加到 50:

@Component({...})
export class BarComponent implements OnInit {
    @Input() width: number = 0;

    ngOnInit() {
        setTimeout(() => this.width = 100, 1000);
    }
}

一秒钟后，宽度将增长到 100 像素。

如果您想将像素换成百分比，请直接进行——它不应该对动画本身有任何影响。