vue 底部弹出动画

你可以使用 Vue 的过渡动画来实现底部弹出动画。以下是一种可能的实现方式：

1. 首先，在你的组件上添加一个 `v-if` 或 `v-show` 指令，用于控制弹出框的显示与隐藏。

2. 在你的组件上添加一个 `transition` 组件，指定过渡动画的名称和持续时间。例如：

<transition name="slide-up" mode="out-in" :duration="{ enter: 300, leave: 200 }">
  <div v-if="showPopup" class="popup">
    <!-- 弹出框内容 -->
  </div>
</transition>

这里的 `name` 属性指定了过渡动画的名称，`mode` 属性指定了过渡模式为 `out-in`，表示先执行离开动画再执行进入动画。`duration` 属性指定了进入和离开动画的持续时间。

3. 在你的 CSS 文件中定义过渡动画的样式。例如：

.slide-up-enter-active,
.slide-up-leave-active {
  transition: transform 0.3s ease-out;
}

.slide-up-enter,
.slide-up-leave-to {
  transform: translateY(100%);
}

这里的 `.slide-up-enter-active` 和 `.slide-up-leave-active` 类指定了进入和离开动画的过渡效果，这里使用了 `transform` 属性来实现弹出框从底部平移进入或平移离开的效果。`.slide-up-enter` 和 `.slide-up-leave-to` 类指定了进入和离开动画的初始和结束状态。

4. 最后，在你的组件中添加一个方法来控制弹出框的显示与隐藏。例如：

export default {
  data() {
    return {
      showPopup: false
    }
  },
  methods: {
    togglePopup() {
      this.showPopup = !this.showPopup
    }
  }
}

你可以在需要的事件中调用该方法，例如点击按钮时触发。