一、前言
前面一章详解了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;
}