Angular 5中基于ngStyle实现宽度变化动画的技术问询

没问题，要给这个绑定了动态宽度的div加上宽度增长的平滑动画，咱们可以用Angular的动画模块来实现，步骤很清晰，我给你一步步拆解：

1. 先导入Angular动画模块 #

首先要确保项目启用了动画支持，打开app.module.ts，添加以下导入并把BrowserAnimationsModule加入到imports数组：

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  imports: [
    // 保留你已有的其他导入...
    BrowserAnimationsModule
  ]
})
export class AppModule { }

2. 在组件中定义宽度动画 #

接下来在你的组件TS文件（比如bar-chart.component.ts）里，导入动画相关工具函数并定义动画逻辑：

import { Component } from '@angular/core';
import { trigger, transition, style, animate } from '@angular/animations';

@Component({
  selector: 'app-bar-chart',
  templateUrl: './bar-chart.component.html',
  styleUrls: ['./bar-chart.component.scss'],
  animations: [
    trigger('widthGrowAnimation', [
      // 监听宽度的任意变化，触发过渡动画
      transition('* => *', [
        // 动画启动前的初始状态（首次加载时会从0开始增长）
        style({ width: '0' }),
        // 动画过程：300ms内平滑过渡到目标宽度，使用ease-in-out缓动让效果更自然
        animate('300ms ease-in-out', style({ width: '*' }))
      ])
    ])
  ]
})
export class BarChartComponent {
  barArray: any[] = []; // 你的数据数组，假设已经有对应数据赋值
}

3. 模板中绑定动画 #

回到你的模板文件，给.blueline的div加上动画绑定，把动画和object.widthValue关联起来——这样每次宽度值变化时，动画都会自动触发：

<ion-row *ngFor="let object of barArray">
  <ion-col class="cityTxt" col-3>{{object.yLable}}</ion-col>
  <ion-col col-9>
    <div class="lksDiv">
      <b>{{object.widthValue}}</b> {{object.unit}}
    </div>
    <div class="greyline">
      <!-- 新增[@widthGrowAnimation]绑定，关联到widthValue -->
      <div class="blueline" [ngStyle]="{'width': object.widthValue}" [@widthGrowAnimation]="object.widthValue"></div>
    </div>
    <!-- 你的其他内容 -->
  </ion-col>
</ion-row>

4. 完善基础样式 #

最后，确保你的SCSS样式里给容器和进度条设置合适的基础样式，让动画正常显示：

.greyline {
  height: 12px;
  background-color: #f0f0f0;
  border-radius: 6px;
  overflow: hidden; // 确保蓝色进度条不会超出灰色容器
}

.blueline {
  height: 100%;
  background-color: #2196f3;
  border-radius: 6px;
  // 这里不需要加CSS transition，Angular动画会全权处理过渡逻辑
}

额外提示 #

• 如果你的widthValue是纯数字（比如75而不是75%），记得在[ngStyle]里补上单位：[ngStyle]="{'width': object.widthValue + '%'}"，否则动画可能无法正常触发。
• 你可以调整动画时长（比如把300ms改成500ms）或缓动函数（比如linear、ease-out）来适配你的视觉需求。
• 要是只想要宽度增加时触发动画，减少时不触发，可以把transition改成transition('void => * , :increment', ...)——不过:increment需要Angular 12+支持，且要求绑定的值是数字类型。

内容的提问来源于stack exchange，提问作者Gitaram Kanawade