AgentSkillsCN

webflow-lifecycle-management

管理模块生命周期、清理工作以及页面过渡效果。适用于处理组件的初始化、销毁，或为页面的进出过程添加动画效果。

SKILL.md
--- frontmatter
name: webflow-lifecycle-management
description: Manage module lifecycles, cleanup, and page transitions. Use when handling component initialization, destruction, or animating page entrances and exits.

Webflow Lifecycle Management

Core lifecycle patterns for memory safety and smooth transitions.

Lifecycle Hooks

  • •onMount: Component startup.
  • •onDestroy: Mandatory cleanup.
  • •onPageIn: Entrance animations.
  • •onPageOut: Exit animations.

Example

typescript
import { onMount, onDestroy, onPageIn, onPageOut } from "@/modules/_";

export default function(element: HTMLElement) {
  onPageIn(async () => { /* transition in */ });
  onPageOut(async () => { /* transition out */ }, { element });
  onDestroy(() => { /* cleanup everything */ });
}