【动画】左右滑入滑出效果、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 = false
      setTimeout(() => {
        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:false


   rightBtn(){
      this.isActive = true
      setTimeout(()=>{
        this.isActive = false
      },2000)
    }
  },

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