用动画过渡让 Vue 中的 v-if 和 v-show 更生动

前端

2024-02-02 23:50:00

在 Vue 中使用过渡动画增强 v-if 和 v-show 的显示效果

理解 v-if 和 v-show 的区别

在 Vue 中，v-if 和 v-show 都是控制元素可见性的指令，但它们的工作原理有所不同。

v-if： 根据条件渲染或不渲染元素。当条件为真时，元素被添加到 DOM 中；当条件为假时，元素被从 DOM 中移除。

v-show： 只更改元素的 CSS display 属性。当条件为真时，display 设置为 block ；当条件为假时，display 设置为 none 。

使用 CSS 过渡为 v-if 和 v-show 添加动画

CSS 过渡允许我们以平滑的方式在元素之间切换样式。为了为 v-if 或 v-show 添加过渡，我们可以使用 Vue 指令 v-transition 。

定义过渡状态

要定义元素的过渡状态，可以使用以下 CSS 类：

v-enter： 定义进入过渡的开始状态。
v-enter-active： 定义进入过渡生效时的状态。
v-enter-to： 定义进入过渡的结束状态。
v-leave： 定义离开过渡的开始状态。
v-leave-active： 定义离开过渡生效时的状态。
v-leave-to： 定义离开过渡的结束状态。

实战示例

下面是一个示例，演示如何使用 Vue 过渡为 v-if 添加动画：

<template>
  <div>
    <button @click="toggle">切换</button>
    <transition name="fade">
      <div v-if="isVisible">可见元素</div>
    </transition>
  </div>
</template>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s ease;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

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