VUE/TS: Using @before-leave hook for <transition-group>: "not assignable to type "Hook<(el: Element) => void> | undefined"

[DevKame]

I want to try out my first transition wihtout using css classes, for that i defined this kind of template:

                    <transition-group tag="h3" :css="false" mode="out-in" @before-leave="hideCharacters">
                        <div
                            :class="{hide_char: char === '_'}"
                            class="work-headline-span-wrapper d-inline-block"
                            v-for="(char, index) in currHeadline"
                            :key="`char-${index}`">
                            <span>
                                {{ char }}
                            </span>
                        </div>
                    </transition-group>

The corresponding function is this:

function hideCharacters(el: HTMLElement) {
    console.log(el);
}

The @before-leave hook is highlighted red and shows this error on hovering:

Again no research had even a similar issue to that topic. Where is the mistake and why?

[Shyam-Chen]

function onBeforeLeave(element: Element) {
  const el = element as HTMLElement;
  
  el.style.width = ...
  el.style.height = ...
}

https://play.vuejs.org/#eNp9UstOwzAQ/JXFl4IEjRCcSqh4qBIgXoJKXHwJ6SZNcdaW7ZRKUf6dtVPaIqGeYs/MbmbW24prY4bLBsVIpC63lfGgMiovpfBOCnDoGzOWVNVGWw8tWCygg8LqGgZcNpAkKdfkPNSuhMvAHw7uUCkNH9qq2cHgKEiKhnJfaQJNN1hoi4+YLfEQFdZIfgST/nAErSSAviEq7rdWQObgbvr0uNZdSOokpUnvmP3xxWNtVOaRbwDp/HTcttFT16UJ3yJakWk8LE9qPUPFGZnnkElsAMxPbUauikYpqzFMAZ1nydXn1jWjf1JIEZtzuVPaj9lV+MT/JduGDKTJjkdxzBPmoEVVDhdOEz9AzC5FrmtTKbQvJtTxK4z6qQQu48F+P0TM2waPf/F8jvnXP/jCrQImxatFhzaY3XA+syVyuEBP3p9xxecNyRNqFKv3kG/otGqCx15209CMbe/ootv7uDoVlVM3WXnkcaxDBaNB2UW9FLxOt3uib+2eDc9jHS+B6H4Aik3sng==

[DevKame]

Thanks for that answer. So i was just using the syntax for the bevoreLeave - hook incorrectly? instead @before-leave i have to use @beforeLeave? is this something new, bc when i was learning vue during the end of last year, it was clearly said to be used like that.

However, your version does not work, Im using this other syntax
<transition-group tag="h3" :css="false" mode="out-in" @beforeLeave="hideCharacters">
while the function beeing

function hideCharacters(el: HTMLElement): void {
    console.log(el);
}

I also changed the functionname to onBeforeLeave just to have it 100% as you have, with no effort, still getting this error:

WHAT DID I REALIZE?

One part of the error is
"'(el: HTMLElement) => void' is not assignable to type 'Hook<(el: Element) => void> | undefined'"

this sounds to me as if vue/ts thinks i want to assign a funktion to something, just like saying const beforeLeave = hideCharacters. Is there any possibiliy that vue does not identify @before-leave as an "Event" and hence doesnt understand that i want to use hideCharacters as Callback function?

[DevKame]

I just stumbled uponj a part where i already used js hooks as attributes:

<transition :name="'work-buttons-to-' + dir" @before-enter="disableReady" @after-enter="enableReady">
   <button v-if="workTopButton === 'port'" class="switcher-buttons rounded-circle portfolio-work"></button>
   <button v-else-if="workTopButton === 'sport'" class="switcher-buttons rounded-circle sport-work"></button>
   <button v-else-if="workTopButton === 'math'" class="switcher-buttons rounded-circle math-work"></button>
   <button v-else-if="workTopButton === 'vocab'" class="switcher-buttons rounded-circle vocab-work"></button>
</transition>

Where the callbacks look like this:

function disableReady(): void {
    transition_ready.value = false;
}
function enableReady(): void {
    transition_ready.value = true;
}

So all this time i was thinking that maybe my IDE Typescript support is messed up. But considering the fact that i already did the exact same thing here, there must be sth particular thats wrong.

Why does it work at the example mentioned above but not at this current one?

[LinusBorg]

You are totally on the wrong track here. The issue is simply that

• the transition hook expects a callback that accepts an object of type Element as it's first argument.
• but you pass it a callback that expects a object of type HTMLElement as it's first argument.

So the type of your callback doesn't match the requirements.

Now, I understand why you want to make it HTMLElement - you are aware that your transition-group contains div elements, which extend from HTMLElement.

But the types of TransitionGroup can't be aware of that. They can only assure you that you get something extending Element - could be HTMLElement, SVGElement or MathMLElement.

Take a second look at the solution provided by Shyam-Chen - it uses Element for the argument type and then typecasts to HTMLElement in the function body. That's why it works.