想封装一个简单的动画组件，用css实现了一遍，效果是可行的，如下:

<template>
    <div>
        <transition name="bar">
            <slot></slot>
        </transition>
    </div>
</template>

<style lang="stylus" scoped>
.bar-enter-active, .bar-leave-active{
    transition: all .3s;
}

.bar-leave-active{
    transform translateY(200px)
}

.bar-enter{
    transform translateY(200px)
}
</style>

因为很多需要动态计算，所以想改为javascript 钩子函数来实现，但是发现怎么尝试都没有效果：

<template>
    <div>
        <transition
            v-on:before-enter="beforeEnter"
            v-on:enter="enter"
            v-on:leave="leave"
        >
            <slot></slot>
        </transition>
    </div>
</template>
<script>
export default {
    name: 'animation',
    methods: {
        beforeEnter: function (el) {
            el.style.transform = 'translate-y(200px)'
        },
        // 此回调函数是可选项的设置
        // 与 CSS 结合时使用
        enter: function (el, done) {
            el.style.transitionDuration = "3s"
            el.style.transitionProperty = "all"
            done()
        },

        // 此回调函数是可选项的设置
        // 与 CSS 结合时使用
        leave: function (el, done) {
            el.style.transform = 'translate-y(200px)'
            // el.style.transition = 'all 3s'
            el.style.transitionDuration  = "3s"
            el.style.transitionProperty = "all"
            done()
        },
    }
}
</script>

问题出在哪儿呢？