Fix: supprime la transition slides-wrapper pendant le redimensionnement

Classe is-resizing ajoutée sur resize, retirée 150ms après le dernier
événement — évite le glissement animé lors du resize de fenêtre.

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

View file

@ -33,7 +33,17 @@
const wrapperWidth = $derived(`${slides.all.length * 100}vw`)
const wrapperTransform = $derived(`translateX(-${slides.activeIndex * 100}vw)`)
let isResizing = $state(false)
let resizeTimer = null
onMount(() => {
const handleResize = () => {
isResizing = true
clearTimeout(resizeTimer)
resizeTimer = setTimeout(() => { isResizing = false }, 150)
}
window.addEventListener('resize', handleResize)
const handleKeydown = (e) => {
if (e.key === 'ArrowRight') {
const next = slides.all[slides.activeIndex + 1]
@ -44,7 +54,11 @@
}
}
window.addEventListener('keydown', handleKeydown)
return () => window.removeEventListener('keydown', handleKeydown)
return () => {
window.removeEventListener('resize', handleResize)
window.removeEventListener('keydown', handleKeydown)
clearTimeout(resizeTimer)
}
})
</script>
@ -54,6 +68,7 @@
<main class="main">
<div
class="slides-wrapper"
class:is-resizing={isResizing}
style="width: {wrapperWidth}; transform: {wrapperTransform}"
>
{#each slides.all as slide}
@ -109,6 +124,10 @@
transition: transform 1000ms cubic-bezier(0.77, 0, 0.175, 1);
}
.slides-wrapper.is-resizing {
transition: none;
}
.slide {
width: 100vw;
height: 100vh;