vue transition js hook使用

Question

背景

使用vue-cli制作的项目，想要做一个 手风琴开合的样式。

问题描述

使用了vue中关于transition的部分，得知很好的动画实现需要指定height而不能放任为auto，
但是菜单的数量是动态的，因此高度也是动态的，就要使用vue transition中js hook的部分，也就是v-bind绑定到函数中，
然而测试发现leave-active和enter-active不能在绑定的函数中起作用，不知如何使用

相关代码

(控制showList的布尔值)

使用css时

tempalte:

<transition name="expand"><ul v-show="showList">...</ul></transition>

style:

.expand-leave-active, .expand-enter-active {
  transition: height .5s;
  overflow: hidden;
}
.expand-enter, .expand-leave-to {
  height: 0;
}
.expand-enter-to, .expand-leave {
  height: 72px;
}

使用js hook时

template:

<transition
    @leave-active="expandProcess"
    @enter-active="expandProcess"
    @leave-to="expandOrigin"
    @enter="expandOrigin"
    @leave="expandEnd"
    @enter-to="expandEnd">
    <ul v-show="showList">
    ...

script:

...
methods: {
    expandProcess (el) {
      el.style.transition = 'height .5s'
      el.style.overflow = 'hidden'
    },
    expandOrigin (el) {
      el.style.height = 0
    },
    expandEnd (el) {
      el.style.height = '72px'
    }
}
...

在css下完美实现，但是在js hook下，控制active的函数expandProcess总是不执行，不知道怎么解决。