【vue】做一个从右边出来又回去的一个抽屉div

前言：工作需要做一个从右往左出现的一个弹窗，要有抽屉效果，看了网上各种方法好多都不能用，最后试了一种可以用，但是忘记是哪个网址了，现在就是自己写一下这个随便以后用到方便找。

做一个从右边出来又回去的一个抽屉div

html代码

<div  class="addBtn" @click="show" >
     点击按钮出现弹窗
    </div>
     <transition name="slide" mode="out-in">  
      <div  class="addForm "  v-if="drawer" >
      </div >
    </transition> 

script代码

<script>
	export default {
		data() {
			return {
			 drawer :false,
			}
		},
		methods: {
			show(){
			  this.drawer=!this.drawer;
			},
		}
	}
</script>

style代码

.addForm{
    position: fixed;
    bottom: 0px;
    height: 880px;
    border-radius:  25px;
    width：1000px
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    background-color: #f8f8f8;
    right: 0px;
  }
  .slide-enter-active {
  animation: rightOpen 0.3s ease;
}
.slide-leave-active {
  animation: rightClose 0.3s ease;
}
@keyframes rightOpen {
  0% {
    transform: translateX(1000px);//向右移动的距离
  }
  100% {
    transform: translateX(0px);
  }
}
@keyframes rightClose {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(1000px);
  }
}