vue 组件中使用 transition 和 transition-group实现过渡动画

使用transition实现过渡动画

步骤1：导入Vue和Transition组件

在组件的script标签中，导入Vue和Transition组件。

<script>
import { Transition } from 'vue';
export default {
  name: 'MyComponent',
  components: {
    Transition
  },
  // ...
}
</script>

步骤2：定义过渡效果

使用<transition>包裹需要过渡的元素，并设置过渡效果的名称，例如fade。

<template>
  <transition name="fade">
    <div v-show="show">Hello World</div>
  </transition>
</template>

步骤3：定义过渡效果的CSS

在组件的style标签中，定义过渡效果的CSS。这里以淡入淡出动画为例。

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

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

示例1：淡入淡出效果

<template>
  <div>
    <button @click="toggle">Toggle</button>
    <transition name="fade">
      <div v-show="show">Hello World</div>
    </transition>
  </div>
</template>

<script>
import { Transition } from 'vue';
export default {
  name: 'MyComponent',
  components: {
    Transition
  },
  data() {
    return {
      show: false
    };
  },
  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>

上述示例中，点击Toggle按钮时，组件中的<div>元素将通过淡入淡出的过渡效果显示或隐藏。

使用transition-group实现过渡动画

步骤1：导入Vue和TransitionGroup组件

在组件的script标签中，导入Vue和TransitionGroup组件。

<script>
import { TransitionGroup } from 'vue';
export default {
  name: 'MyComponent',
  components: {
    TransitionGroup
  },
  // ...
}
</script>

步骤2：定义过渡效果

使用<transition-group>包裹需要过渡的列表，并设置过渡效果的名称，例如fade.

<template>
  <transition-group name="fade">
    <div v-for="item in items" :key="item">{{ item }}</div>
  </transition-group>
</template>

步骤3：定义过渡效果的CSS

在组件的style标签中，定义过渡效果的CSS。这里以渐变缩放动画为例。

<style>
.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s;
}

.fade-enter,
.fade-leave-to {
  transform: scale(0);
  opacity: 0;
}
</style>

示例2：列表项的渐变缩放效果

<template>
  <div>
    <button @click="addItem">Add Item</button>
    <button @click="removeItem">Remove Item</button>
    <transition-group name="fade">
      <div v-for="item in items" :key="item">{{ item }}</div>
    </transition-group>
  </div>
</template>

<script>
import { TransitionGroup } from 'vue';
export default {
  name: 'MyComponent',
  components: {
    TransitionGroup
  },
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3']
    };
  },
  methods: {
    addItem() {
      this.items.push(`Item ${this.items.length + 1}`);
    },
    removeItem() {
      this.items.pop();
    }
  }
}
</script>

<style>
.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s;
}

.fade-enter,
.fade-leave-to {
  transform: scale(0);
  opacity: 0;
}
</style>

上述示例中，点击"Add Item"按钮时，会在列表中添加一个新的项，其以渐变缩放的过渡效果显示。点击"Remove Item"按钮时，最后一个列表项将以渐变缩放的过渡效果隐藏并移除。