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:
parent
09d05f53da
commit
8dcec0e2c7
1 changed files with 20 additions and 1 deletions
|
|
@ -33,7 +33,17 @@
|
||||||
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 isResizing = $state(false)
|
||||||
|
let resizeTimer = null
|
||||||
|
|
||||||
onMount(() => {
|
onMount(() => {
|
||||||
|
const handleResize = () => {
|
||||||
|
isResizing = true
|
||||||
|
clearTimeout(resizeTimer)
|
||||||
|
resizeTimer = setTimeout(() => { isResizing = false }, 150)
|
||||||
|
}
|
||||||
|
window.addEventListener('resize', handleResize)
|
||||||
|
|
||||||
const handleKeydown = (e) => {
|
const handleKeydown = (e) => {
|
||||||
if (e.key === 'ArrowRight') {
|
if (e.key === 'ArrowRight') {
|
||||||
const next = slides.all[slides.activeIndex + 1]
|
const next = slides.all[slides.activeIndex + 1]
|
||||||
|
|
@ -44,7 +54,11 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
window.addEventListener('keydown', handleKeydown)
|
window.addEventListener('keydown', handleKeydown)
|
||||||
return () => window.removeEventListener('keydown', handleKeydown)
|
return () => {
|
||||||
|
window.removeEventListener('resize', handleResize)
|
||||||
|
window.removeEventListener('keydown', handleKeydown)
|
||||||
|
clearTimeout(resizeTimer)
|
||||||
|
}
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
@ -54,6 +68,7 @@
|
||||||
<main class="main">
|
<main class="main">
|
||||||
<div
|
<div
|
||||||
class="slides-wrapper"
|
class="slides-wrapper"
|
||||||
|
class:is-resizing={isResizing}
|
||||||
style="width: {wrapperWidth}; transform: {wrapperTransform}"
|
style="width: {wrapperWidth}; transform: {wrapperTransform}"
|
||||||
>
|
>
|
||||||
{#each slides.all as slide}
|
{#each slides.all as slide}
|
||||||
|
|
@ -109,6 +124,10 @@
|
||||||
transition: transform 1000ms cubic-bezier(0.77, 0, 0.175, 1);
|
transition: transform 1000ms cubic-bezier(0.77, 0, 0.175, 1);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.slides-wrapper.is-resizing {
|
||||||
|
transition: none;
|
||||||
|
}
|
||||||
|
|
||||||
.slide {
|
.slide {
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue