Vue, Использование javascript-хука для достижения сбоя анимации

Я написал компонент анимации, который отлично работает, но реализует его с использованием имени класса следующим образом:

<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)'
        },
        enter: function (el, done) {
            el.style.transitionDuration = "3s"
            el.style.transitionProperty = "all"
            done()
        },
        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>

Сначала у меня были трудности, потому что я обнаружил, что el.style.transform = 'translate-y(200px)' вообще не работает.

Я просто хочу, чтобы они добились такого же эффекта, но в чем проблема?

Спасибо за вашу помощь !