vue 动画过渡

来源：互联网发布：福利软件编辑：程序博客网时间：2024/05/17 16:11

/* 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>

0 0