模块化进度条

Posted 2023-03-13

【中文标题】模块化进度条

【英文标题】：Modular progress bar

【发布时间】：2018-07-30 03:10:01

【问题描述】：

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

<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";
  

在摆弄这个太久之后，我认为* 应该对宽度属性进行处理。我可以手动更改我的scss 文件，并且该栏可以正常工作。所以我想我只需要以某种方式设置 CSS 宽度属性。

【参考方案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 像素。

如果您想将像素换成百分比，请继续——它不应该对动画本身产生任何影响。

【讨论】：

现在它只是设置为我一开始指定的宽度。没有发生过渡。我最终想要的是在客户端视口内触发几十个这样的条。

对不起，这是未经测试的。尝试将 CSS 过渡更改为 all 而不是 width，添加 display: block 等。但这是一般简单的想法。此外，你可以用任何你喜欢的方式包装它并传递更多@Input()'s。如果它仍然不起作用，请告诉我，我实际上会给你一个经过测试的解决方案；只是在飞行中写的。

是的，谢谢。明白了，我从0 开始，然后随时更改宽度。

不错！很高兴它有效。我也有时会迷失在尝试构建复杂的 Angular 动画的迷宫中，哈哈。 CSS 通常是简单事物的良好开端。