lab Home
11

Page transition Nuxt — rideau en colonnes entre deux pages

Nuxt 4 / pageTransition

Chargement de la démo…

Naviguez entre Accueil, Projets et Contact dans le mini-site.

Chaque changement de page devient une transition maîtrisée : le site paraît fluide comme une application.

Intensité
Performance
Léger
Mobile
Fonctionne tel quel.
Accessibilité
Fondu court entre les pages.
Idéal pour
Tous secteursPortfolioAgenceMarque premium

Featured :

  1. 1.Transition déclarée côté Nuxt, sans CSS : definePageMeta({ pageTransition: { name: 'curtain', mode: 'out-in', css: false, onLeave, onEnter } })
  2. 2.Ou pour tout le site dans nuxt.config.ts : app: { pageTransition: { name: 'curtain', mode: 'out-in' } }
  3. 3.Sortie : les colonnes tombent avec { scaleY: 1, transformOrigin: 'top', stagger: 0.05 }, et on appelle done() en fin de timeline
  4. 4.Entrée : les colonnes se retirent par le bas, le titre remonte de son masque avec { yPercent: 110, ease: 'expo.out', stagger: 0.06 }
  5. 5.Le rideau vit dans app.vue, hors de <NuxtPage />, pour survivre au changement de page
Next