vue 过渡效果transition

1.把需要过渡的元素放入<transition>标记中
2.使用name 将相应的元素与样式关联起来

<transition name="fade" mode="out-in">
            <button v-if="isOn" @click="isOn=!isOn" key="on">打开</button>
            <button v-else @click="isOn=!isOn" key="off">关闭</button>
</transition>
<style>
       .fade-enter {     //  进入时的初始状态
            opacity: 0;
        }
        .fade-enter-to {   //进入过渡结束状态
            opacity: 1;
        }
        .fade-leave {      //离开过渡的开始状态
            opacity: 1;
        }
        .fade-leave-to {      //离开时的初始状态
            opacity: 0;
        }
        .fade-enter-active {    //进入过渡生效的状态
            transition: all 0.8s ease;
        }
        .fade-leave-active {    //离开过渡生效时的状态
            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>长时间的排队情况</p>
                                        <p>导致游客满意度下降</p>                                
                                    </div>
                                </transition>
                            </li>
    data() {
        return {
            showIndustry: {
                "1": true,
                "2": true,
                "3": true,
                "4": true,
            }
        };
    },
    methods: {
        changeIndustry(num) {
            this.showIndustry[num] = !this.showIndustry[num];
        },
    },

/* 动画 */
.proMove-enter,
.proMove-leave-to {
    opacity: 0;
}
.proMove-enter-active,
.proMove-leave-active {
    transition: opacity 1s;
}