on:animationend can't access bind:this svelte (undefined)

I wanted to use querySelector() but I find that Svelte has another way to do this.

by using bind:this

the problem is that sometimes it works, but the most of time it will never work

by outputting undefined

here is a simple example:

<script>  let thisDiv;  console.log(thisDiv) // ❌"undefined" ✅"<div>"</script><div bind:this={thisDiv}>hello world</div>

the real bug

but the real problem is here

because I don't need to console.log for now

the things I wrote before are only for making you understand the bug
so I can start putting more information.

because I have a function that uses that variable
and call the function when the event "on:animationend" starts.

like this:

<div  bind:this={thisDiv}  on:animationend={doStuff()}></div>

the problem is that animationend still console.log the thisDivundefined

maybe is a problem of speed?

yes, ok...

but the animation in CSS only is 50ms long. and also tried with 0.5s

and CSS doesn't block the javascript, so js will continue to work when CSS is doing his animations (from what I know)

and 0.5s I think is a lot for doing a simple bind:this (querySelector)

how is it even possible? half second for getting a normal querySelector and still nothing.

source code

here the REPL online svelte source code example:

https://svelte.dev/repl/b49d019ce7f8426b80295158b091520f?version=3.50.1

make sure to uncomment the line 9 in child.svelte

...or see this directly

App.svelte

<script>    import Child from "./Child.svelte"    function generateExample() {        let output = [];        for(let i=0; i<=100; i++) {            output = [                ...output, `text ${i}`            ]        }        return output;    }  let array = generateExample()</script>{#each array as item, index}<Child {index}>      {item}</Child>{/each}

Child.svelte

<script>  export let index;  const DELAY = 50;  let thisDiv;    // UNCOMMENT THE NEXT LINE  function doStuff() {         // thisDiv.scrollIntoView();   }</script><div  style="--delay:{index * DELAY}ms;"  bind:this={thisDiv}  on:animationend={doStuff()}><slot></slot></div><style>  div {    animation: show var(--delay);  }  @keyframes show {    from {      translate: 100vw;    }    to {      translate: 0;    }  }</style>