Counter: Redefine each column's height on browser resize as well

This commit is contained in:
2020-03-31 20:02:55 +02:00
parent b00fbd031e
commit e2602b4806

View File

@@ -16,18 +16,26 @@
$: digits = index.split('')
/*
** Run code when mounted
*/
onMount(() => {
// Set columns height
const setColumnHeight = () => {
// Set each digit column's height = its spans combined (in order to translate in tens of %)
counter.querySelectorAll('div').forEach(column => {
const spans = column.querySelectorAll('span')
column.style.height = spans[0].offsetHeight * spans.length + 'px'
})
}
/*
** Run code when mounted
*/
onMount(() => {
setColumnHeight()
})
</script>
<svelte:window on:resize={setColumnHeight} />
<div class="counter {className}" bind:this={counter}>
{#each digits as digit}
<div class="counter__column" style="transform: translateY(-{digit}0%);">