Question

我编写了一个动画组件，该组件可以正常工作，但可以使用以下类名来实现它：

<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)'根本不起作用。

我只希望它们达到相同的效果，但是问题出在哪里？

感谢您的帮助！

vue，使用javascript钩子实现动画失败

0 个答案: