vue点击按钮动画弹出弹框

你可以使用Vue的transition组件来实现点击按钮弹出弹框的动画效果。具体实现步骤如下：

1. 在Vue组件中添加一个按钮，并为其绑定一个点击事件。

2. 在Vue组件中定义一个data属性，用于控制弹框的显示和隐藏状态。

3. 使用Vue的transition组件包裹弹框内容，并设置name属性。

4. 在transition组件中使用v-if指令控制弹框的显示和隐藏。

5. 在transition组件中使用CSS样式定义弹框的进入和离开动画效果。

以下是一个简单的示例代码：

<template>
  <div>
    <button @click="showModal = true">点击弹出弹框</button>
    <transition name="modal">
      <div class="modal-mask" v-if="showModal">
        <div class="modal-wrapper">
          <div class="modal-container">
            <!-- 弹框内容 -->
            <h3>这是一个弹框！</h3>
            <p>点击右上角的X可以关闭弹框。</p>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showModal: false
    }
  }
}
</script>

<style>
.modal-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-wrapper {
  display: inline-block;
  background-color: #fff;
  border-radius: 4px;
  padding: 20px;
}

.modal-enter-active,
.modal-leave-active {
  transition: opacity 0.3s;
}

.modal-enter,
.modal-leave-to {
  opacity: 0;
}
</style>

在上面的示例代码中，当点击按钮时，showModal属性的值会变为true，弹框就会显示出来，同时触发进入动画效果。当点击弹框右上角的X按钮关闭弹框时，showModal属性的值会变为false，弹框就会隐藏起来，同时触发离开动画效果。你可以根据自己的需求修改样式或动画效果。