skills.rest
IsKenKenYa
IsKenKenYaCOMMUNITY
Explore all skills by this author →
GitHub

hmos-arkui-longtake-transition

Implements longtake shared-element page transitions in HarmonyOS ArkUI apps using ezcustomtransition.

2|Updated Jun 21, 2026
Search Tags:#navigation#mobile development#arkui#harmonyos#transition animation#ezcustomtransition#longtake
One-click install
npx skills add https://github.com/IsKenKenYa/skills --skill hmos-arkui-longtake-transition-iskenkenya
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: hmos-arkui-longtake-transition
Source: https://github.com/IsKenKenYa/skills/tree/main/skills/harmonyos/development/application-framework/ArkUI/hmos-arkui-longtake-transition
Command: npx skills add https://github.com/IsKenKenYa/skills --skill hmos-arkui-longtake-transition-iskenkenya

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @hmanimations/ezcustomtransition, and includes references (resource) and assets (resource) components.

What problem does it solve? Adding smooth shared-element (longtake) page transitions in HarmonyOS apps requires coordinated changes across EntryAbility, AbilityStage, Navigation, trigger pages, and destination pages. Missing any single step silently breaks the animation, and developers often struggle with background color handling, status bar immersion, and gesture-return alignment. ## Core Features & Use Cases - Six-Step Integration Guide: Walks through installing @hmanimations/ezcustomtransition and modifying EntryAbility, AbilityStage, Navigation, trigger page, and destination page in the correct order. - Card and Image Scenarios: Covers both CardLongTake (card-to-detail expansion) and ImageLongTake (grid-to-fullscreen image viewer with return-position alignment via updateSnapshotComponentId). - Troubleshooting & Verification: Provides a 10-item integration checklist and a common-error table covering missing component ids, background color migration, expandSafeArea, and gesture disabling. - Use Case: A developer has a Navigation-based HarmonyOS app with a card list and wants the tapped card to expand fluidly into the detail page, including immersive status bar handling and interactive gesture return. ## Quick Start Ask the assistant to add a longtake transition so that tapping a card in your HarmonyOS Navigation app expands it into the detail page.

Frequently Asked Questions about hmos-arkui-longtake-transition

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add a longtake transition animation in a HarmonyOS app?▼

Install @hmanimations/ezcustomtransition via ohpm, then follow six steps: initialize in EntryAbility, handle configuration changes in AbilityStage, add customNavContentTransition to Navigation, generate a LongTakeTransitionParam on the trigger page, and configure LongTakeSession with LongTakeTransitionDelegate on the destination page.

How to implement image grid to fullscreen viewer transition in ArkUI?▼

Use LongTakeTransitionType.ImageLongTake when calling generateLongTakeParam, assign a unique .id() to each grid image, and call longTakeSession.updateSnapshotComponentId before returning so the exit animation aligns with the currently viewed image.

Does ezcustomtransition work with Router-based HarmonyOS apps?▼

No, ezcustomtransition requires the Navigation plus NavDestination routing system. Apps using the legacy Router API must migrate to Navigation first, and destination pages must also hide the default title bar and adapt to immersive status bar.

Why is my longtake transition not animating after integration?▼

The most common cause is a missing .id() on the tapped component, since generateLongTakeParam locates the animation start point by component id. Also verify hideTitleBar(true), background color migration to child components, expandSafeArea, and the EntryAbility init call.

How do I handle background color during a longtake transition?▼

Move the original NavDestination background color onto the child content component and set the NavDestination background to longTakeSession.navDestinationBgColor when a transition param exists. Add expandSafeArea so the color extends under the status bar.

Related Skills

Explore More Software Engineering Skills→
PeterCowlingPeterCowling

migrate-to-app-router

Migrate Next.js Pages Router routes to the App Router with server components.

Community
Intermediate
wildbitcawildbitca
1

common-mobile-animation

Automate native-feel mobile animation design for Flutter, Swift, and Kotlin.

Official
Advanced
deomiarndeomiarn

page-transitions

Implement a three-layer Framer Motion overlay for Next.js App Router route changes.

Community
Advanced
trystan2ktrystan2k
1

react-view-transitions

Implement native View Transition API animations for React applications.

Community
Intermediate