vue 动画过渡

/* animation */

@keyframes slideIn {
    from {
        transform: translate3d(100%, 0, 0);
        opacity: 0;
    }
    to {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

@keyframes slideOut {
    from {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
    to {
        transform: translate3d(100%, 0, 0);
        opacity: 0;
    }
}

.page{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 1; // fix 滑动几次后可滚动区域会卡住的问题
}
body{
    height:100vh;
    width: 100vw;
    overflow-y: auto;
}
.slide-enter-active {
    animation: slideIn .2s forwards;
}

.slide-leave-active {
    animation: slideOut .2s forwards;
}

.mainPage {
    height: 100vh;
    width: 100vw;

    overflow-y: auto;
}.fragments{    position: absolute;    top:0;    right: 0;    bottom: 0;    left: 0;    overflow-y: auto;    -webkit-overflow-scrolling: touch;    z-index: 1; // fix 滑动几次后可滚动区域会卡住的问题
}
    <transition name="slide">
        .slide-enter-active {
        animation: slideIn .2s forwards;
        }

        .slide-leave-active {
        animation: slideOut .2s forwards;
        }
        class名-enter-active代表进入动画 class名-leave-active 离开动画

        <template v-if="flag==1">
            <div class="fragments testPage">
                11111111111111
                <a href="javascript:;" class="weui-btn weui-btn_primary" @click="s_in('0')">切换主页面</a>
                <a href="javascript:;" class="weui-btn weui-btn_primary" @click="s_in('3')">切换主页面</a>
            </div>
        </template>
        
    </transition>

</div>