Skills
.Work. You
Rest

css-transition-stuck-spa-navigation

Community

Fix stuck CSS transitions in SPAs

Software Engineering#javascript#css#animation#spa#transitions#reflow
Authorhubeiqiao
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill resolves an issue where CSS transitions on elements become "stuck" and fail to animate correctly after navigating between pages in a Single Page Application (SPA).

Core Features & Use Cases

  • SPA Navigation Fix: Ensures CSS transitions (opacity, transform) work reliably after SPA page changes.
  • Reflow Synchronization: Implements a robust method to force browser reflows, synchronizing style updates.
  • Use Case: When elements with fade-in or slide-in animations fail to appear after clicking a navigation link in your React or Vue SPA, this skill will restore their intended animation.

Quick Start

Apply the resetAndInitReveal function to the container element after SPA navigation.

Dependency Matrix

Required Modules

None required

Components

scriptsreferences

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: css-transition-stuck-spa-navigation
Download link: https://github.com/hubeiqiao/skills/archive/main.zip#css-transition-stuck-spa-navigation

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.