Vue3基础教程：Vue.js过渡与动画使用

在Vue.js开发中，过渡与动画能够极大地提升用户体验，为应用增添生动与交互性。Vue3提供了丰富且便捷的方式来实现过渡与动画效果。

Vue.js通过<transition>组件来实现单个元素或组件的过渡效果。当一个元素在插入或移除DOM时，我们可以为其添加过渡效果。例如，在HTML中创建一个按钮，点击按钮显示或隐藏一个段落，代码如下：

<template>
  <div>
    <button @click="show =!show">切换显示</button>
    <transition name="fade">
      <p v-if="show">这是一段有过渡效果的文字</p>
    </transition>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const show = ref(false);
</script>

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

在上述代码中，<transition>组件的name属性定义了过渡的类名前缀。通过CSS设置fade-enter-from、fade-leave-to等类名的样式，实现淡入淡出的过渡效果。

对于多个元素或组件的过渡，可以使用<transition-group>组件。它适用于列表渲染时元素的添加、移除或排序变化。比如，展示一个待办事项列表，添加或删除事项时带有过渡效果：

<template>
  <div>
    <input v-model="newItem" placeholder="添加事项">
    <button @click="addItem">添加</button>
    <transition-group name="slide" tag="ul">
      <li v-for="(item, index) in items" :key="index">{{ item }}</li>
    </transition-group>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const newItem = ref('');
const items = ref([]);
const addItem = () => {
  items.value.push(newItem.value);
  newItem.value = '';
};
</script>

<style scoped>
.slide-enter-from {
  transform: translateX(100%);
}
.slide-leave-to {
  transform: translateX(-100%);
}
.slide-enter-active,
.slide-leave-active {
  transition: transform 0.5s;
}
</style>

除了CSS过渡，Vue.js还支持JavaScript钩子函数来实现更复杂的动画逻辑。通过在<transition>组件中绑定@before-enter、@enter、@after-enter等钩子函数，可以在过渡的不同阶段执行自定义代码。

掌握Vue.js的过渡与动画使用，能够让我们打造出更加流畅、美观且富有交互性的Web应用。无论是简单的淡入淡出，还是复杂的列表动画，都能轻松实现。