I want to use transition JavaScript Hooks in vue.js (https://v3.vuejs.org/guide/transitions-enterleave.html#javascript-hooks)

In the component html,

<transition name="fade" @before-enter="beforeEnter">
   <ul v-show="show">
      <p>hoge</p>
   </ul>
</transition>

In the component ts,

const beforeEnter = (el:HTMLElement)=> {
    el.style.height = '0';
}

With the following code I get

Type '(el: HTMLElement) => void' is not assignable to type '(el: Element) => void'.
  Types of parameters 'el' and 'el' are incompatible.ts(2322)

How to solve this error?

CodePudding user response：

The event handler returns a more generic type. You will need to cast.

const beforeEnter = (el:Element)=> {
    const hel = el as HtmlElement
    // const hel = el as unknown as HtmlElement
    hel.style.height = '0';
}

Updating your dependencies might also solve the problem.