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腾讯技术创作特训营第三期有奖征文，组队打卡瓜分大奖！
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读