关于 vue 的 transiton 组件和 render 以及 es6 的 class 语法的问题

Question

要基于 vue 实现一个 collapse 的过渡动画，大部分内容来自element-ui。
当我使用 class 语法写的时候，动画的钩子函数完全没有执行
但当我使用 prototype 的形式的时候却没有这个问题
请高手指教，代码如下：
class 形式的构造函数为 Transition1 ，prototype 形式的构造函数为 Transition2

class Transition1 {
  beforeEnter(el) {
  }  
  enter(el) {
  }
  afterEnter(el) {
  }
  beforeLeave(el) {
  }
  leave(el) {
  }
  afterLeave(el) {
  }
}

function Transition2() {}
Transition2.prototype.beforeEnter = function beforeEnter(el) {}
Transition2.prototype.enter = function enter(el) {}
Transition2.prototype.afterEnter = function afterEnter(el) {}
Transition2.prototype.beforeLeave = function beforeLeave(el) {}
Transition2.prototype.leave = function leave(el) {}
Transition2.prototype.afterLeave = function afterLeave(el) {}

export default {
  functional: true,
  render(h, { children }) {
    const data = {
      on: new Transition1()
    }
    return h('transition', data, children)
  }
}

为了方便阅读，这些钩子函数的具体内容我省略掉了
实在令人疑惑，class 应该只是个语法糖啊，为什么会有不一样的表现