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这两种状态。

然后这两个状态又分别划分成了两个步骤：from - to，代表进入/离开过程的那一刻。

而中间的enter/leave 状态，则是动画开始生效的时候，会应用于整个动画阶段，一般用于定义动画的持续实现、延迟、速度曲线。

而我们要做的就是，给指定初始、结束状态，然后在中间状态给定相关的变换属性，就可以实现动画效果。

比如前面我们就是在enter与leave状态添加了转换状态：

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

这里的transition为css中的属性，不了解的可以自行浏览器搜索学习，意思大概是启动了opacity这个属性在0.5s根据ease速度曲线完成变化。

然后我们又在进入过程的开始与离开过程的末尾，设置这个透明属性为0，即完全透明：

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