vue v-if使用动画向上滑出效果

在Vue.js中，如果你想在`v-if`指令控制元素显示时添加一个滑动上来的动画效果，你可以利用`v-enter`和`v-leave-active`这两个过渡状态。首先，在你的组件模板上，需要给元素加上`transition`或`v-transition`的CSS类，并配置过渡效果：

<template>
  <div class="slide-animation">
    <div v-if="showElement" @enter="onEnter" @leave="onLeave">这是要滑入的内容</div>
  </div>
</template>

<style scoped>
.slide-animation {
  position: relative;
}

.slide-animation div {
  transition: transform 0.5s ease-in-out; /* 设置过渡时间及缓动 */
}

.slide-animation div.v-enter {
  opacity: 0;
  transform: translateY(100%); /* 初始位置在底部 */
}

.slide-animation div.v-enter-to {
  opacity: 1;
  transform: translateY(0); /* 完成后的显示位置 */
}

.slide-animation div.v-leave-active {
  opacity: 1;
  transform: translateY(0);
}

.slide-animation div.v-leave-to {
  opacity: 0;
  transform: translateY(-100%); /* 动画结束时的位置 */
}
</style>

然后，在JavaScript部分定义`onEnter`和`onLeave`方法，用于触发过渡动画开始和结束：

export default {
  data() {
    return {
      showElement: false,
    };
  },
  methods: {
    onEnter(tooltip) {
      this.showElement = true;
    },
    onLeave(tooltip) {
      this.$nextTick(() => {
        tooltip.style.display = 'none';
      });
    },
  },
};