6. 内置组件

一、前言

前面一章详解了vue中的组件这一概念以及基本的使用方法，而本章比较简单，就是在前文的基础之上，学习一些vue中内置的组件，可以很方便的帮我们达成某种效果。

二、动画效果组件

首先是动画效果，以前我们一般需要用css里面的animation属性与关键帧（@keyframes）来实现的，比较麻烦。

而vue就提供了一个叫做Transition的内置组件可以帮我们简化这一步骤：

<script setup>
import { ref } from 'vue';

const isShow=ref(false);

</script>

<template>
  <Transition>
    <div v-if="isShow">测试动画</div>
  </Transition>
  <button @click="isShow=!isShow">点击</button>
</template>

<style scoped>

.v-enter-active,
.v-leave-active {
  transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}

</style>

上面的代码实现了一个简单的动画效果：点击按钮，文字缓慢显示，再点击，文字缓慢消失。

而实现的方法就是在Transition组件中包裹一个想要拥有动画效果的组件，并且该组件需要用特定的指令进行触发。

<Transition>
	<div v-if="isShow">测试动画</div>
</Transition>

比如这里用的v-if，还有v-show，都是比较常用的，只有当后面的响应式变量为true时才会显示该标签。

写好上面的代码后，我们就可以开始写样式了：

.v-enter-active,
.v-leave-active {
  transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}

这是几个特殊的类，由官方提供的，共有6个：

因为一个组件就显示、消失这两个过程，所以上图是分别展示的，表示为Enter与Leave这两种状态。