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个:

image-20231008133617479

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

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

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

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

比如前面我们就是在enterleave状态添加了转换状态:

.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;
}
作者:余识
全部文章:0
会员文章:0
总阅读量:0
c/c++pythonrustJavaScriptwindowslinux