Vue動畫中appear-cancelled的觸發(fā)條件是什么？

下面這個例子，完美解答你的問題

<template>
    <div>
        <transition
          appear
            v-on:before-appear="customBeforeAppearHook"
            v-on:appear="customAppearHook"
            v-on:after-appear="customAfterAppearHook"
            v-on:appear-cancelled="customAppearCancelledHook">
            <div ref="div" v-if="show">hello world</div>
        </transition>
    </div>
</template>

<script>
export default {
    data(){
        return {
            show: true
        }
    },
    methods: {
        customBeforeAppearHook(val){
            this.show = false

            console.log('customBeforeAppearHook')
        },
        customAppearHook(val){
            // this.show = false

            console.log('customAppearHook')
        },
        customAfterAppearHook(val){

            console.log('customAfterAppearHook')
        },
        customAppearCancelledHook(){
            console.log('取消customAppearCancelledHook')
        }
    },
    mounted(){
        console.log('mounted')
    }
}
</script>

總結(jié)，觸發(fā)條件就是customBeforeAppearHook/customAppearHook兩個鉤子函數(shù)中有不顯示該節(jié)點的操作v-if/ v-show都會觸發(fā)appear-cancelled鉤子函數(shù)。實際場景不多，一般在動畫執(zhí)行過程中被用戶取消后，可以執(zhí)行一些操作。