css - 新的列表项应该淡入

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>

希望对您有所帮助。