css - 动画背景颜色，如 Angular2 中 div 内的进度条

Question

我曾尝试在“%”中传递宽度，但面临像进度条一样缓慢增加 div 宽度的问题。

这里是一个fiddle链接，是用jQuery实现的 fiddle 链接:http://jsfiddle.net/9wn0vhnn/

我正在尝试在 angular2 中实现相同的工作实现。

应用程序组件.ts

@Component({
selector: 'app-root',
 templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
encapsulation: ViewEncapsulation.None
animations: []
 })

export class AppComponent  {
backgroundColorofdimMix = ['red'];
percentofCurrentPriorMeasure = [50];

 }

app.component.html

<div class='col-xs-12 rmpm' style=' border : 1px solid #ccc;box-shadow: 2px 3px 2px 1px #222;'>

<div style='height:100%;float:left;font-weight:bold;' [ngStyle]="{'background':backgroundColorofdimMix[0],'width':percentofCurrentPriorMeasure[0] + '%','font-size':'12px','padding':'1px','text-align':'center','color':'#000'}">

   AAAAAAA         

</div>

<div style='height:100%;float:left;font-weight:bold;' [ngStyle]="{'line-height':lineHeight,'width': 'calc(100% - '+ percentofCurrentPriorMeasure[0] +'%)','font-size':'12px','padding':'1px','text-align':'center'}">
BBBB
</div>
</div>

Answer 1

我使用自定义进度条 CSS 在示例 Angular 5 应用程序中创建了一个进度条。引用css tricks .检查working demo

TS文件

import { Component } from '@angular/core';
import { Observable } from 'rxjs/Rx';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular 5';
  width : any=0;


  constructor(){
    this.runProgressBar();
  }

  runProgressBar(){
    Observable.timer(0,100)
    .takeWhile(()=>
       this.isWidthWithinLimit()
       )
    .subscribe(()=>{
      this.width=this.width+1;
      console.log(this.width);
    })

  }

  isWidthWithinLimit(){
    if(this.width===100){
      return false;
    }else{
      return true;
    }
  }
}

HTML文件

<div class="meter">
  <span  [style.width]="width+'%'"></span>
</div>

CSS文件

.meter { 
    height: 20px;  /* Can be anything */
    position: relative;
    background: #555;
    -moz-border-radius: 25px;
    -webkit-border-radius: 25px;
    border-radius: 25px;
    padding: 10px;
    box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
}

.meter > span {
  display: block;
  height: 100%;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  background-color: rgb(43,194,83);
  background-image: linear-gradient(
    center bottom,
    rgb(43,194,83) 37%,
    rgb(84,240,84) 69%
  );
  box-shadow: 
    inset 0 2px 9px  rgba(255,255,255,0.3),
    inset 0 -2px 6px rgba(0,0,0,0.4);
  position: relative;
  overflow: hidden;
}