[Vue3.X]v-if 在transition中失去效果

来源：5-7 Vue中的动画封装

极致简洁

2022-06-05

我点击按钮切换显示效果的时候，v-show 点击到第三次，效果就无法正常展示了,v-if没有这个问题。
麻烦看下v-show和v-if在这个场景下到底是什么原因导致了这个渐变效果失去作用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue中JS动画和velocity.js 及多个元素动画效果</title>
    <script src="https://unpkg.com/vue@next"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/2.0.6/velocity.min.js"></script>
    <style>
        .fade-enter-from,
        .fade-leave-to {
            opacity: 0;
        }
        .fade-enter-active,
        .fade-leave-active {
            transform-origin: left center;
            transition: opacity 0.3s;
        }
    </style>
</head>
<body>
<div id="app">

    <child-two :show="show">
    </child-two>
    <button @click="clickEvent"> 切换</button>
</div>
</body>
<script>

    const childTwo = {
        props: {
            show: {
                required: true,
                type: Boolean
            }
        },
        template: `
          <transition @after-enter="afterEnter" @before-enter="beforeEnter"  @enter="enter" name="fade">
          <div v-show="show">hello </div>
          </transition>
        `,
        methods: {
            beforeEnter(el) {
                console.log('beforeEnter childTwo')
                el.style.color = 'red';
                el.style.opacity = 0;
            },
            enter(el, callback) {
                console.log('Enter  childTwo' )
                Velocity(el,
                    {opacity: 1},
                    {
                        duration: 1000,
                        complete: callback
                    })
            },
            afterEnter(el) {
                console.log('after Enter  childTwo' )
                el.style.color = 'black'
                console.log("动画输出")
            }
        }
    }
    app = Vue.createApp({
        data() {
            return {
                msg: 'hello world',
                show: true
            }
        },
        methods: {
            clickEvent() {
                this.show = !this.show
            },
        },
        components:{
            childTwo
        }
    });
    mp = app.mount('#app');
</script>
</html>