vue利用javascript鉤子函數(shù)實現(xiàn)動畫無效

@donglegend 你好，謝謝，基本上可以，但是這種方式感覺有缺陷，如下：

//假設我想在1s中完成動畫（滑動250px）
//那么我需要函數(shù)執(zhí)行多少次呢？
//很顯然，如果我想動畫看上去越順滑，那必須每次移動的像素就越小，所以函數(shù)執(zhí)行越頻繁；
//相反，如果函數(shù)間隔時間越大，動畫會非常難看（一次移動的像素太多）

問題：假設我滑動的距離足夠大（1000px），執(zhí)行的時間足夠短（0.3s），看上去動畫要足夠順滑（每次移動5px），那么函數(shù)需要多長時間執(zhí)行一次呢？ 。0.3 / (1000 / 5) ，0.3s要執(zhí)行200次函數(shù)，每 0.0015s 執(zhí)行一次，這么頻繁的執(zhí)行函數(shù)到底有沒有問題呢？如果每次只能移動1px呢？

再者就是這些計算麻煩，不如css3動畫來得方便。

我用css實現(xiàn)的動畫和js鉤子實現(xiàn)的作比較，都是0.3s，總感覺css的動畫要快，要順滑。

<template>
    <transition
        v-on:before-enter="beforeEnter"
        v-on:enter="enter"
        v-on:leave="leave"
    >
        <slot></slot>
    </transition>
</template>
<script>
export default {
    name: 'animation',
    data() {
        return {
            enterTimer: null,
            leaveTimer: null
        }
    },
    methods: {
        beforeEnter: function(el) {
            //設置滑塊的初始位置（滑塊的寬度）
            el.style.bottom = '-250px'
        },
        enter: function(el, done) {
            clearInterval(this.leaveTimer)
            let _v = 0
            //假設我想在1s中完成動畫（滑動250px）
            //那么我需要函數(shù)執(zhí)行多少次呢？
            //很顯然，如果我想動畫看上去越順滑，那必須每次移動的像素就越小，所以函數(shù)執(zhí)行越頻繁；
            //相反，如果函數(shù)間隔時間越大，動畫會非常難看（一次移動的像素太多）
            this.enterTimer = setInterval(() => {
                if (_v < 250) {
                    _v += 2.5
                } else {
                    _v = 250
                    clearInterval(this.enterTimer)
                    done()
                }
                el.style.opacity = _v
                el.style.transform = `translateY(-${_v}px)`
            }, 3)
        },
        leave: function(el, done) {
            clearInterval(this.enterTimer)
            let _v = 250
            this.leaveTimer = setInterval(() => {
                if (_v > 0) {
                    _v -= 2.5
                } else {
                    _v = 0
                    clearInterval(this.leaveTimer)
                    done()
                }
                el.style.opacity = _v
                el.style.transform = `translateY(-${_v}px)`
            }, 3)
        }
    }
}
</script>

之前一直以為官方價紹了兩種方式是等價的，并且兩種方式對應的demo不是等效的，感覺這是巨大的一個坑

題主可能沒太理解 javascript鉤子動畫的用法。
你第一種是用 class類名切換通過css3自身實現(xiàn)的過渡動畫，但是鉤子函數(shù)實現(xiàn)動畫是另一種概念，需要通過 自己用定時器實現(xiàn)，當然也可以配合css使用，這個官方有說明，下面簡單寫一個 opacity 過渡demo，
題主可以參考理解一下，如有疑問，歡迎再次討論。

<template>
    <transition
        v-on:before-enter="beforeEnter"
        v-on:enter="enter"
        v-on:leave="leave"
    >
        <slot></slot>
    </transition>
</template>
<script>
export default {
    name: 'animation',
    data() {
        return {
            enterTimer: null,
            leaveTimer: null
        }
    },
    methods: {
        beforeEnter: function(el) {
            el.style.opacity = 0
            el.style.transform = 'translateX(0px)'
            el.style.transformOrigin = 'left'
        },
        // 此回調函數(shù)是可選項的設置
        // 與 CSS 結合時使用
        enter: function(el, done) {
            clearInterval(this.leaveTimer)
            let _v = 0
            this.enterTimer = setInterval(() => {
                if (_v < 1) {
                    _v += 0.01
                } else {
                    _v = 1
                    clearInterval(this.enterTimer)
                    done()
                }
                el.style.opacity = _v
                el.style.transform = `translateX(${_v * 100}px)`
            }, 30)
        },

        // 此回調函數(shù)是可選項的設置
        // 與 CSS 結合時使用
        leave: function(el, done) {
            clearInterval(this.enterTimer)
            let _v = 1
            this.leaveTimer = setInterval(() => {
                if (_v > 0) {
                    _v -= 0.01
                } else {
                    _v = 0
                    clearInterval(this.leaveTimer)
                    done()
                }
                el.style.opacity = _v
                el.style.transform = `translateX(${_v * 100}px)`
            }, 30)
        }
    }
}
</script>

enter: function (el, done) {
   this.$nextTick(()=>{
            el.style.transitionDuration = "3s"
            el.style.transitionProperty = "all"
            })
            done()
        },

這樣試試