Angular *ngFor 列表的动画

如果你想为 ngFor 列表创建一个动画，当移除一个项目时，该项目会淡出，而其下方的剩余项目会缓慢向上滑动，你可以这样做。

以下是动画的代码：

export const fadeOutAndShrinkAnimation: AnimationTriggerMetadata = trigger(
  "fadeOutAndShrinkAnimation",
  [
    transition(":leave", [
      sequence([
        query(".css-class-of-ngfor-list", [
          style({ opacity: 1 }),
          animate("600ms ease-in", style({ opacity: 0 })),
        ]),
        query(".css-class-of-ngfor-list", [
          animate("800ms ease-in", style({ height: 0 })),
        ]),
      ]),
    ]),
  ]
);

代码解析如下：

• fadeOutAndShrinkAnimation 是一个常量，用于存储动画触发器的定义。
• trigger("fadeOutAndShrinkAnimation", [...]) 用于定义触发器。字符串 "fadeOutAndShrinkAnimation" 是触发器的名称。
• transition(":leave", [...]) 用于为触发器定义一个过渡效果。 :leave 是一个特殊的状态，当元素离开视图时（例如被移除）应用该状态。
• 在过渡中，使用 sequence([...]) 定义了一系列动画步骤。
• query(".call-notification-item", [...]) 用于选定具有类名 "call-notification-item" 的组件元素。query 函数通常用于为匹配特定选择器的元素定义动画。
• 在第一个查询中，包含以下动画序列：
• style({ opacity: 1 })：将选定元素的初始不透明度设置为 1。
• animate("600ms ease-in", style({ opacity: 0 }))：以 "ease-in" 的方式在 600 毫秒内将选定元素的不透明度动画化为 0。
• 在第二个查询中，包含以下动画序列：
• animate("800ms ease-in", style({ height: 0 }))：以 "ease-in" 的方式在 800 毫秒内将选定元素的高度动画化为 0。

我正在参与2023腾讯技术创作特训营第三期有奖征文，组队打卡瓜分大奖！