Fix: pas de slide animé au chargement initial sur une page autre qu'accueil
All checks were successful
Deploy / Deploy to Production (push) Successful in 17s

La transition n'est activée qu'après le premier paint à la bonne position
(requestAnimationFrame une fois slides.all initialisé).
Remplace is-resizing par is-animated pour unifier les deux cas.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
isUnknown 2026-03-05 17:54:28 +01:00
parent 8dcec0e2c7
commit 01adf70585

View file

@ -33,9 +33,18 @@
const wrapperWidth = $derived(`${slides.all.length * 100}vw`)
const wrapperTransform = $derived(`translateX(-${slides.activeIndex * 100}vw)`)
let isReady = $state(false)
let isResizing = $state(false)
let resizeTimer = null
// Active la transition seulement après le premier paint à la bonne position.
// Sans ça, un chargement sur /expertise slide depuis l'accueil.
$effect(() => {
if (slides.all.length > 0 && !isReady) {
requestAnimationFrame(() => { isReady = true })
}
})
onMount(() => {
const handleResize = () => {
isResizing = true
@ -68,7 +77,7 @@
<main class="main">
<div
class="slides-wrapper"
class:is-resizing={isResizing}
class:is-animated={isReady && !isResizing}
style="width: {wrapperWidth}; transform: {wrapperTransform}"
>
{#each slides.all as slide}
@ -121,11 +130,10 @@
.slides-wrapper {
display: flex;
height: 100%;
transition: transform 1000ms cubic-bezier(0.77, 0, 0.175, 1);
}
.slides-wrapper.is-resizing {
transition: none;
.slides-wrapper.is-animated {
transition: transform 1000ms cubic-bezier(0.77, 0, 0.175, 1);
}
.slide {