Vue/Uni-app/微信小程序 v-if 设置出场/退出动画（页面交互不死板，看起来更流畅）

天梦星服务平台 (tmxkj.top)https://tmxkj.top/#/

在Vue.js中，使用

v-if

进行条件渲染时设置动画可以通过

<transition>

组件来实现。

具体操作步骤如下：

1. 包裹条件渲染的元素：您需要将要通过v-if控制显示隐藏的元素包裹在<transition>标签内。
2. 命名过渡效果：给<transition>标签添加name属性，并赋予一个名字，这个名字将用于定义CSS过渡类名。
3. 编写过渡样式：在CSS中编写与name属性相对应的过渡样式。这些样式通常包括三个部分：进入前的样式（-enter），进入过程中的样式（-enter-active），以及进入完成后的样式（-enter-to）。
4. 设置过渡效果：在<transition>标签或Vue实例的配置中，可以设置过渡效果的持续时间、缓动函数等。
5. 使用v-if控制显示：在包裹好的<transition>标签内部使用v-if来控制元素的显示和隐藏。

例如，如果您想要实现一个淡入淡出的过渡效果，可以这样操作：

<template>
  <div>
    <!-- 使用 transition 包裹 v-if 元素 -->
    <transition name="fade">
      <div v-if="show" class="box">我是一个有动画的元素</div>
    </transition>
    <button @click="toggle">切换显示</button>
  </div>
</template>

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

<style>
/* 定义过渡效果 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>