vue transition js钩子用法无法实现过渡

Question

import Vue from 'vue'

const MessageConstructor = Vue.extend({
    data() {
        return {
            msg: '我不就是个莫得感情的弹出框?',
            show: false,
            duration: 1000000,
            time: null
        }
    },
    mounted() {
        this.time = Date.now()
        setTimeout(() => {
            this.show = false
        }, this.duration);
    },
    methods: {
        resTime() {
            return Math.floor((Date.now() - this.time) / 1000)
        }
    },
    render(h) {
        const _this = this
        return h('transition', {
            on: {
                beforeEnter(el) {
                    _this.time = Date.now()
                    el.style.transition = 'all 3s ease'
                    el.style.opacity = 0
                    console.log('I am beforeEnter::', _this.resTime())
                },
                enter(el) {
                    el.style.opacity = 1
                    console.log('I am enter::', _this.resTime())
                },
                afterEnter() {
                    console.log('I am afterEnter::', _this.resTime())
                },
                beforeLeave() {
                    _this.time = Date.now()
                    console.log("I am beforeLeave::", _this.resTime())
                },
                leave() {
                    console.log('I am leave::', _this.resTime())
                },
                afterLeave() {
                    console.log('I am afterLeave::', _this.resTime())
                }
            }
        }, [ this.show && h('div', this.msg)])
    }
})

const Message = function(options) {
    if (typeof options === 'string') {
        options = {
            msg: options
        }
    }

    const vm = new MessageConstructor({
        el: document.createElement('div'),
        data: options
    })
    vm.show = true
    document.body.appendChild(vm.$el)
}

export default Message

大佬帮忙看下问题好嘛，beforeEnter钩子把不透明度调为0，enter钩子调为1，并且beforeEnter中已经有了过渡css——transition，为什么还是不起效果呢？？？