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像素。

如果您想换出百分比的像素，请继续前进 - 它不会对动画本身产生任何影响。

模块化进度条

1 个答案: