页面组件怎么设置过渡动画（非vue-router切换）利用transition标签与animate.css

简单记录：多个组件为页面切换时如何设置过渡动画。

路由切换设置过渡效果请移步："https://blog.csdn.net/qq_33236453/article/details/79110485"

 "animate.css版本为": "^4.1.0"

红色部分为相关主要代码：

<template>
    <div class="wrapper">
        <div class="Header_Screen">
            <ul class="Tabs">
                <li
                    v-for="(item, index) in Tabs_List"
                    :key="index"
                    :class="{ choose: Tabs_active == index }"
                    @click="Tabs_Chlik(index)"
                >
                    {{ item }}
                </li>
            </ul>
            <ul class="FixedTabs">
                <li
                    v-for="(item, index) in Fixed_List"
                    :key="index"
                    :class="{ choose: Fixed_active == index }"
                    @click="Fixed_Chlik(index)"
                >
                    {{ item }}
                </li>
                <div class="tiancho"></div>
                <div class="tiancho1"></div>
                <div class="leftline"></div>
                <div class="rightline"></div>
            </ul>
        </div>
        <div class="Main">
            <transition
                :enter-active-class="Tabs_active > oldTabs_active ? 'animate__fadeInUp' : 'animate__fadeInDown'"
                :leave-active-class="Tabs_active > oldTabs_active ? 'animate__fadeOutUp' : 'animate__fadeOutDown'"
                duration="860"
                mode="out-in"
            >
                <Return-Status class="animate__animated" v-if="Tabs_active == 0"></Return-Status>
                <Return-Analysis
                    class="animate__animated"
                    :isFullscreenForNoScroll="isFullscreenForNoScroll"
                    v-else-if="Tabs_active == 1"
                ></Return-Analysis>
                <Top20-ProblemAnalysis class="animate__animated" v-else-if="Tabs_active == 2"></Top20-ProblemAnalysis>
                <Top20-ParagraphAnalysis
                    class="animate__animated"
                    v-else-if="Tabs_active == 3"
                ></Top20-ParagraphAnalysis>
                <Top20-SupplierAnalysis class="animate__animated" v-else-if="Tabs_active == 4"></Top20-SupplierAnalysis>
                <Top20-BranchCompanies class="animate__animated" v-else-if="Tabs_active == 5"></Top20-BranchCompanies>
                <Terminal-Problem class="animate__animated" v-else></Terminal-Problem>
            </transition>
        </div>
    </div>
</template>

<script>
import ReturnStatus from './components/ReturnStatus'; //退货状况
import ReturnAnalysis from './components/ReturnAnalysis'; //退货分析
import Top20ProblemAnalysis from './components/Top20_ProblemAnalysis'; //退货TOP20问题分析
import Top20ParagraphAnalysis from './components/Top20_ParagraphAnalysis'; //退货TOP20款分析
import Top20SupplierAnalysis from './components/Top20_SupplierAnalysis'; //退货TOP20供应商分析
import Top20BranchCompanies from './components/Top20_BranchCompanies'; //退货TOP20分公司分析
import TerminalProblem from './components/TerminalProblem'; //终端问题登记实时
export default {
    components: {
        ReturnStatus,
        ReturnAnalysis,
        Top20ProblemAnalysis,
        Top20ParagraphAnalysis,
        Top20SupplierAnalysis,
        Top20BranchCompanies,
        TerminalProblem,
    },
    props: {},
    data() {
        return {
            Tabs_List: [
                '退货状况',
                '退货分析',
                '退货TOP20问题分析',
                '退货TOP20款分析',
                '退货TOP20供应商分析',
                '退货TOP20分公司分析',
                '终端问题登记实时',
            ],
            Fixed_List: ['全部', '电商', '主标'],
            Tabs_active: '0',
            Fixed_active: '0',
            oldTabs_active: '0', //记录旧值
            IS_OPEN_Popup: true,
            reloadTimer: null, //间隔刷新定时器
        };
    },
    watch: {},
    computed: {
        // 是否全屏
        isFullscreenForNoScroll() {
            var explorer = window.navigator.userAgent.toLowerCase();
            if (explorer.indexOf('chrome') > 0) {
                //webkit
                if (
                    document.body.scrollHeight === window.screen.height &&
                    document.body.scrollWidth === window.screen.width
                ) {
                    return '全屏';
                } else {
                    return '不全屏';
                }
            } else {
                //IE 9+  fireFox
                if (window.outerHeight === window.screen.height && window.outerWidth === window.screen.width) {
                    return '全屏';
                } else {
                    return '不全屏';
                }
            }
        },
    },
    methods: {
        Tabs_Chlik(index) {
            this.oldTabs_active = this.Tabs_active;
            this.Tabs_active = index;
            sessionStorage.setItem('TAB_ACTIVE', this.Tabs_active);
        },
        Fixed_Chlik(index) {
            this.Fixed_active = index;
        },
        //禁止滚动
        stop() {
            let mo = function(e) {
                e.preventDefault();
            };
            document.body.style.overflow = 'hidden';
            document.addEventListener('touchmove', mo, false); //禁止页面滑动
        },
        /***取消滑动限制***/
        move() {
            let mo = function(e) {
                e.preventDefault();
            };
            document.body.style.overflow = ''; //出现滚动条
            document.removeEventListener('touchmove', mo, false);
        },
        // 窗口发生大小变化就刷新
        temp() {
            window.onresize = (temp) => {
                window.location.reload();
            };
        },
        // 子通父,查询子组件返回的值
        Response(data) {
            console.log(data);
        },
        // 监听是否全屏 --- https://blog.csdn.net/k358971707/article/details/60465689?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.channel_param
    },
    created() {},
    mounted() {
        const senu = sessionStorage.getItem('TAB_ACTIVE');
        if (senu != null || senu != undefined) {
            this.Tabs_active = sessionStorage.getItem('TAB_ACTIVE');
        }

        this.stop();
        this.$once('hook:beforeDestroy', () => {
            this.move();
        });
        this.temp();

        // 五分钟刷新一次
        // this.reloadTimer = setInterval(() => {
        //  window.location.reload();
        // }, 300000);

        // setInterval(() => {
        //  if (this.Tabs_active <= this.Tabs_List.length) {
        //      this.Tabs_active++;
        //      this.Tabs_Chlik(this.Tabs_active);
        //  } else {
        //      this.Tabs_active = 0;
        //  }
        // }, 3000);
    },
    destroyed() {
        clearInterval(this.reloadTimer);
    },
};
</script>
<style lang="scss" scoped>
$theme_color: '#C4F7FE';
.wrapper {
    width: 100%;
    min-height: 100vh;
    // CSS-禁止文本被选中代码
    -moz-user-select: none; /*火狐*/
    -webkit-user-select: none; /*webkit浏览器*/
    -ms-user-select: none; /*IE10*/
    -khtml-user-select: none; /*早期浏览器*/
    user-select: none;
    .Header_Screen {
        width: 100%;
        height: 80px;
        background: #000c13;
        position: relative;
        .Tabs {
            position: absolute;
            left: 40px;
            bottom: 0;
            display: flex;
            li {
                transition: all 0.2s ease;
                font-size: 20px;
                color: #6c93a2;
                margin-right: 18px;
                padding: 20px 18px;
                cursor: pointer;
                display: flex;
                flex-direction: column;
                align-items: center;
                position: relative;
                &:last-of-type {
                    margin-right: 0;
                }
                &::before {
                    content: '';
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    right: 0;
                    margin: auto;
                    width: 90%;
                    height: 6px;
                    background-color: #fff;
                    transform: scale3d(0, 1, 1);
                    transform-origin: center;
                    transition: all 0.3s ease-in-out;
                    box-shadow: 3px 0px 12px rgba(255, 255, 255, 0.72);
                }
                &.choose {
                    color: #c4f7fe;
                    &::before {
                        transform: scale3d(1, 1, 1);
                        background-color: #c4f7fe;
                    }
                }
            }
            li:hover {
                color: #c4f7fe;
            }
        }
        .FixedTabs {
            position: absolute;
            right: 20px;
            bottom: 0;
            display: flex;
            background: rgba(85, 85, 85, 0.8);
            li {
                transition: all 0.2s ease;
                font-size: 20px;
                color: #6c93a2;
                margin-right: 22px;
                padding: 14px 18px;
                cursor: pointer;
                display: flex;
                flex-direction: column;
                align-items: center;
                position: relative;
                &:last-of-type {
                    margin-right: 0;
                }
                &::before {
                    content: '';
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    right: 0;
                    margin: auto;
                    width: 75%;
                    height: 6px;
                    background-color: #fff;
                    transform: scale3d(0, 1, 1);
                    transform-origin: center;
                    transition: all 0.3s ease-in-out;
                    box-shadow: 3px 0px 12px rgba(255, 255, 255, 0.72);
                }
                &.choose {
                    color: #c4f7fe;
                    &::before {
                        transform: scale3d(1, 1, 1);
                        background-color: #c4f7fe;
                    }
                }
            }
            li:hover {
                color: #c4f7fe;
            }
            .tiancho {
                position: absolute;
                left: -51px;
                bottom: 0;
                width: 0;
                height: 0;
                border-top: 51px solid transparent;
                border-bottom: 0px;
                border-right: 51px solid rgba(85, 85, 85, 0.8);
                border-left: 0px;
            }
            .tiancho1 {
                position: absolute;
                right: -20px;
                bottom: 0;
                width: 20px;
                height: 51px;
                background-color: rgba(85, 85, 85, 0.8);
            }
            .leftline {
                width: 1.4px;
                height: 30px;
                background: #08151d;
                position: absolute;
                top: 50%;
                left: 86px;
                transform: translateY(-50%);
            }
            .rightline {
                width: 1.4px;
                height: 30px;
                background: #08151d;
                position: absolute;
                top: 50%;
                left: 184px;
                transform: translateY(-50%);
            }
        }
    }
    .Main {
        width: 100%;
        height: calc(100vh - 80px);
        background-image: url(../../assets/Big_Screnn1.png);
        background-size: 100% 100%;
    }
}
</style>