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
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:
parent
8dcec0e2c7
commit
01adf70585
1 changed files with 12 additions and 4 deletions
|
|
@ -33,9 +33,18 @@
|
||||||
const wrapperWidth = $derived(`${slides.all.length * 100}vw`)
|
const wrapperWidth = $derived(`${slides.all.length * 100}vw`)
|
||||||
const wrapperTransform = $derived(`translateX(-${slides.activeIndex * 100}vw)`)
|
const wrapperTransform = $derived(`translateX(-${slides.activeIndex * 100}vw)`)
|
||||||
|
|
||||||
|
let isReady = $state(false)
|
||||||
let isResizing = $state(false)
|
let isResizing = $state(false)
|
||||||
let resizeTimer = null
|
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(() => {
|
onMount(() => {
|
||||||
const handleResize = () => {
|
const handleResize = () => {
|
||||||
isResizing = true
|
isResizing = true
|
||||||
|
|
@ -68,7 +77,7 @@
|
||||||
<main class="main">
|
<main class="main">
|
||||||
<div
|
<div
|
||||||
class="slides-wrapper"
|
class="slides-wrapper"
|
||||||
class:is-resizing={isResizing}
|
class:is-animated={isReady && !isResizing}
|
||||||
style="width: {wrapperWidth}; transform: {wrapperTransform}"
|
style="width: {wrapperWidth}; transform: {wrapperTransform}"
|
||||||
>
|
>
|
||||||
{#each slides.all as slide}
|
{#each slides.all as slide}
|
||||||
|
|
@ -121,11 +130,10 @@
|
||||||
.slides-wrapper {
|
.slides-wrapper {
|
||||||
display: flex;
|
display: flex;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
transition: transform 1000ms cubic-bezier(0.77, 0, 0.175, 1);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.slides-wrapper.is-resizing {
|
.slides-wrapper.is-animated {
|
||||||
transition: none;
|
transition: transform 1000ms cubic-bezier(0.77, 0, 0.175, 1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.slide {
|
.slide {
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue