1.把需要過(guò)渡的元素放入<transition>標(biāo)記中
2.使用name 將相應(yīng)的元素與樣式關(guān)聯(lián)起來(lái)

<transition name="fade" mode="out-in">
            <button v-if="isOn" @click="isOn=!isOn" key="on">打開(kāi)</button>
            <button v-else @click="isOn=!isOn" key="off">關(guān)閉</button>
</transition>
<style>
       .fade-enter {     //  進(jìn)入時(shí)的初始狀態(tài)
            opacity: 0;
        }
        .fade-enter-to {   //進(jìn)入過(guò)渡結(jié)束狀態(tài)
            opacity: 1;
        }
        .fade-leave {      //離開(kāi)過(guò)渡的開(kāi)始狀態(tài)
            opacity: 1;
        }
        .fade-leave-to {      //離開(kāi)時(shí)的初始狀態(tài)
            opacity: 0;
        }
        .fade-enter-active {    //進(jìn)入過(guò)渡生效的狀態(tài)
            transition: all 0.8s ease;
        }
        .fade-leave-active {    //離開(kāi)過(guò)渡生效時(shí)的狀態(tài)
            transition: all 0.8s ease;
        }
</style>
——————————————————————————
           <li @mouseenter="changeIndustry(2)" @mouseleave="changeIndustry(2)">
                                <div v-show="showIndustry[2]">
                                    <img src="../assets/images/solution/jingqu/icon02.png" alt />
                                    <p>游客滿意度下降</p>
                                    <div class="line"></div>
                                </div>
                                <transition name="proMove">
                                    <div class="quesConActive" v-show="!showIndustry[2]">
                                        <h3>游客滿意度下降</h3>
                                        <div class="line"></div>
                                        <p>長(zhǎng)時(shí)間的排隊(duì)情況</p>
                                        <p>導(dǎo)致游客滿意度下降</p>                                
                                    </div>
                                </transition>
                            </li>
    data() {
        return {
            showIndustry: {
                "1": true,
                "2": true,
                "3": true,
                "4": true,
            }
        };
    },
    methods: {
        changeIndustry(num) {
            this.showIndustry[num] = !this.showIndustry[num];
        },
    },

/* 動(dòng)畫(huà) */
.proMove-enter,
.proMove-leave-to {
    opacity: 0;
}
.proMove-enter-active,
.proMove-leave-active {
    transition: opacity 1s;
}