左右滑入滑出

文章目录

左右滑入滑出用transition不用transition

用transition

<!-- 左边--><transition name="left"><div class="left" v-if="isShowLeft"><!-- 点击后left消失再滑入--><p @click="handleChangeLeft" style="font-size: 1rem;font-weight: bold;margin-top: 2rem;cursor: pointer">社会xxx</p></div></transition>

isShowLeft: true,handleChangeLeft () {this.isShowLeft = falsesetTimeout(() => {this.isShowLeft = true}, 100)},

<!--自动匹配到transition的name-->.left-enter-active {animation: left 1s ease-in-out 1 forwards;}@keyframes left {0% {left: -23.99rem;opacity: 1;}100% {left: 1.3rem;opacity: 1;}}

不用transition

<div class="right" :class="{rightactive: isActive===true}"><!-- 点击后right消失再滑入--><div class="title" style="cursor: pointer" @click="rightBtn">数字化xxxx</div></div></div>

isActive:falserightBtn(){this.isActive = truesetTimeout(()=>{this.isActive = false},2000)}},

.rightactive{animation: anim-open 2s ease;}@keyframes anim-open {0%{right: -2394px;}100%{right: 84px;}}