vue 弹窗出现带动画效果（从按钮位置滑出并从小变大的弹窗）

大概效果:

用vue3写的，不过逻辑都一样 主要是js+css；
实现方法逻辑：①先写弹窗的div，用fixed布局，确定弹窗的位置；②绑定鼠标点击事件，主要是获得按钮和弹窗在屏幕的位置 计算定位用；③给弹窗写上css动画； ④绑定按钮的点击事件，让弹窗出现

代码就分成html、css、js 三部分写，方便复制直接使用

一、html部分

 <div class="addBtn" @click="show=!show">打开一个弹窗（带动画）</div>
 <div class="test element" v-if="show"></div>

二、js部分

绑定鼠标点击事件是配合css使用，目的是拿到按钮和弹窗在屏幕的位置，拿到之后js部分其实可以删除，并没有什么用
鼠标点击一下按钮的拿到按钮的位置，比如x y是300 100;再点一下弹窗中心位置，比如是 1000 600，然后使用弹窗的X轴减按钮的X轴：1000-300=700，再使用弹窗的Y轴减按钮的Y轴：600-100=500 ；自己记住这两个坐标的距离差 是 700 500

//控制弹窗显示隐藏
let show = ref(false)
//获取鼠标点击的位置
function savePoint(event) {
  let xPoint = event.pageX
  let PPoint = event.pageY
  console.log(event.pageX, event.pageY)
}
onMounted(() => {
  window.addEventListener('click', savePoint)
})

三、css（重点）

为什么是负数：因为transform-origin属性，默认以此元素为中心,所以你点击弹窗的x轴y轴就可以作为0，0，按钮在弹窗的左边或下边就是负、在右边或上边就为正；
ps：计算的不那么精准的话；自己调试调试++ - -

<style scoped lang="scss">
@keyframes scaleAnimation {
  0% {

    transform: scale(0);
    transform-origin: -700px -500px;//这里就是js计算出来的坐标差
  }
  100% {
    transform: scale(1);
    transform-origin: 0 0px;
  }
}
.element {
  animation: scaleAnimation 1s ease-out forwards;//绑定动画
}
//基础样式以及位置
.test {
  width: 300px;
  height: 200px;
  position: fixed;
  top: 474px;
  left: 860px;
  background: pink;
}
<style>

不知道说明白没有：js部分配一张图，就是计算红线的距离(两条红线是x和y哈，顺手写成了两个x)