Angular Javascript 进度条 逐行显示 动画

我找到了Angular 动画模块.这是ne的解决方案.

Content

1)创建可广泛共享的新typescript文件->；app.animations.ts

2)将BrowserAnimationsModule导入模块->；app.modules.ts

3)在中导入和定义动画->；应用程序组件.ts(或要使用动画的组件)

4)将动画应用于html->；应用程序组件.例如html.

Let's Start

1)以较慢的动画速度(300ms)创建一个新的typescript文件，以便查看动画.

import {
  trigger,
  transition,
  style,
  animate,
  query,
  stagger,
} from '@angular/animations';

export const listAnimation = trigger('listAnimation', [
  transition('* <=> *', [
    query(
      ':enter',
      [
        style({ opacity: 0 }),
        stagger('300ms', animate('3000ms ease-out', style({ opacity: 1 }))),
      ],
      { optional: true }
    ),
    query(':leave', animate('300ms', style({ opacity: 0 })), {
      optional: true,
    }),
  ]),
]);

2.)导入Angular 动画

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

@NgModule({
  imports: [
    BrowserAnimationsModule
   }),
  ]
})

3.)在组件中导入和定义动画

import { listAnimation } from './app.animations';

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

4)将动画应用于组件html数组列表->；app.component.html

    <ul [@listAnimation]="jsonArray.length">
        <li *ngFor="let element of jsonArray">{{element}}</li>
    </ul>

Finally see the result

注意目标只是，从上到下的行将显示延时.progressbar中从左到右的动画是另一种解决方案(纯css)