Question

我的TS文件中有一个动态呈现给模板的列表：

    <ul*ngFor ="let product of products let ind = index" >
        <li>
            <span> Text will be rendered here</span>                
        </li>
    </ul>

我需要将项目推送到MyList动画。

Answer 1

这是如何使用动画框架

的基本示例

动画（如果需要，转换它）：

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

export const FadeAnimation = trigger(
  'fadeAnimation', [
    transition(':enter', [
      style({
          opacity: 0
        }
      ),
      animate(
        200,
        style({
          opacity: 1
        })
      )
    ]),
    transition(':leave', [
      animate(
        200,
        style({
          opacity: 0
        })
      )
    ])
  ]
);

在组件（导入动画）中：

@Component({
  selector: 'your-selector',
  templateUrl: './your-component-name.component.html',
  styleUrls: ['./your-component-name.component.css'],
  animations: [
    FadeAnimation,
  ]
})

在 html 中（如果条件为真：不透明度设置为1，否则不透明度设置为0）：

<ul*ngFor ="let product of products let i = index" >
    <li [ngClass]="{'highlightClass': i%2==0}" [@fadeAnimation]="true">
        <span> Text will be rendered here</span>
        <span> More text here </span>
    </li>
</ul>

我希望这会有所帮助。

新列表项应该淡入

1 个答案: