vue3过渡和动画详解
vue3过渡和动画详解
- 一、认识动画
- 二、Vue的transition动画
- 三、Transition组件的原理
- 四、class添加的时机和命名规则
- 五、过渡css动画
- 六、同时设置过渡和动画
- 七、过渡的模式mode
- 八、认识animate.css
- 九、认识gsap库
- 十、列表的过渡
一、认识动画
- 在开发中,我们想要给一个组件的显示和消失添加某种过渡动画,可以很好的增加用户体验
React
框架本身并没有提供任何动画相关的API
,所以在React中使用过渡动画我们需要使用一个第三方库react-transition-group
Vue
中为我们提供一些内置组件和对应的API
来完成动画,利用它们我们可以方便的实现过渡动画效果
- 我们来看一个案例
- Hello World的显示和隐藏
- 通过下面的代码实现,是不会有任何动画效果的,很生硬
<template><div class="app"><div><button @click="isShow = !isShow">显示/隐藏</button></div><h2 v-if="isShow">helloWorld</h2></div>
</template><script>export default {components: {},data () {return {isShow: true}}
}
</script>
- 没有动画的情况下,整个内容的显示和隐藏会非常的
生硬
- 如果我们希望给
单元素或者组件实现过渡动画
,可以使用 transition 内置组件
来完成动画
二、Vue的transition动画
Vue 提供了 transition 的封装组件,在下列情形中,可以给任何元素和组件添加进入/离开过渡
条件渲染
(使用 v-if)条件展示 (使用 v-show)动态组件
组件根节点
三、Transition组件的原理
- 通过上面的代码,我们观察会发现,Vue自动给h2元素添加了动画,这是什么原因呢?
- 当插入或删除包含在 transition 组件中的元素时,Vue 将会做以下处理
- 1.
自动嗅探
目标元素是否应用了CSS过渡或者动画
,如果有
,那么在恰当的时机添加/删除 CSS类名
- 2.如果 transition 组件提供了
JavaScript钩子函数
,这些钩子函数将在恰当的时机被调用; - 3.如果
没有找到JavaScript钩子并且也没有检测到CSS过渡/动画,DOM插入、删除操作将会立即执行
那么都会添加或者删除哪些class呢?
v-enter-from
:定义进入过渡的开始状态。在元素被插入之前生效,在元素被插入之后的下一帧移除v-enter-active
:定义进入过渡生效时的状态。在整个进入过渡的阶段中应用,在元素被插入之前生效,在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间,延迟和曲线函数v-enter-to
:定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter-from 被移除),在过渡/动画完成之后移除v-leave-from
:定义离开过渡的开始状态。在离开过渡被触发时立刻生效,下一帧被移除v-leave-active
:定义离开过渡生效时的状态。在整个离开过渡的阶段中应用,在离开过渡被触发时立刻生效,在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间,延迟和曲线函数v-leave-to
:离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave-from 被删除),在过渡/动画完成之后移除
四、class添加的时机和命名规则
class的name命名规则如下
- 如果我们使用的是一个没有name的transition,那么所有的class是以 v- 作为默认前缀
- 如果我们添加了一个name属性,比如
<transtion name="fade">
,那么所有的class会以 fade- 开头
五、过渡css动画
- 前面我们是通过transition来实现的动画效果,另外我们也可以通过animation来实现
六、同时设置过渡和动画
- Vue为了知道过渡的完成,内部是在监听 transitionend 或 animationend,到底使用哪一个取决于元素应用的CSS规则:
- 如果我们
只是使用了其中的一个
,那么Vue能自动识别类型并设置监听
- 但是如果我们同时使用了过渡和动画呢?
- 并且在这个情况下可能某一个动画执行结束时,另外一个动画还没有结束
- 在这种情况下,我们可以
设置 type 属性
为animation
或者transition
来明确的告知Vue监听的类型
显示的指定动画时间 - 我们也可以显示的来指定过渡的时间,通过 duration 属性
- duration可以设置两种类型的值
number类型
:同时设置进入和离开的过渡时间object类型
:分别设置进入和离开的过渡时间
七、过渡的模式mode
- 我们来看当前的动画在两个元素之间切换的时候存在的问题
- 我们会发现 Hello World 和 你好啊,李银河是同时存在的
- 这是因为
默认情况下进入和离开动画是同时发生的
- 如果确实我们希望达到这个的效果,那么是没有问题
- 但是如果我们不希望同时执行进入和离开动画,那么我们需要设置
transition的过渡模式
in-out
: 新元素先进行过渡,完成之后当前元素过渡离开out-in
: 当前元素先进行过渡,完成之后新元素过渡进入
动态组件的切换- 上面的示例同样适用于我们的动态组件
appear初次渲染 - 默认情况下,
首次渲染的时候是没有动画的
,如果我们希望给他添加上去动画,那么就可以增加另外一个属性appear
:
八、认识animate.css
- 如果我们手动一个个来编写这些动画,那么效率是比较低的,所以在开发中我们可能会引用一些第三方库的动画库,比如
animate.css
- 什么是animate.css呢?
Animate.css是一个已经准备好的
、跨平台
的动画库
为我们的web项目,对于强调、主页、滑动、注意力引导非常有用 - 如何使用Animate库呢?
第一步:需要安装animate.css库
第二步:导入
animate.css库的样式
第三步:使用animation动画
或者animate提供的类
- 自定义过渡class
我们可以通过以下 attribute 来自定义过渡类名
enter-from-classenter-active-classenter-to-classleave-from-classleave-active-classleave-to-class
他们的优先级高于普通的类名,这对于 Vue 的过渡系统和其他第三方 CSS 动画库,如 Animate.css. 结合使用十分有用
animate.css库的使用
安装animate.css
npm install animate.css
在main.js中导入animate.css
接下来在使用的时候我们有两种用法
用法一:直接使用animate库中定义的 keyframes 动画
用法二:直接使用animate库提供给我们的类
九、认识gsap库
某些情况下我们希望
通过JavaScript
来实现一些动画的效果
,这个时候我们可以选择使用gsap库
来完成什么是gsap呢?
GSAP是The GreenSock Animation Platform(GreenSock动画平台)的缩写
它可以通过JavaScript为CSS属性、SVG、Canvas
等设置动画,并且是浏览器兼容的这个库应该如何使用呢?
第一步:需要安装gsap库;
第二步:导入gsap库
第三步:使用对应的api即可我们可以先安装一下gsap库
npm install gsap
JavaScript钩子
在使用动画之前,我们先来看一下transition组件给我们提供的JavaScript钩子,这些钩子可以帮助我们监听动画执行到什么阶段了 |
---|
- 当我们使用JavaScript来执行过渡动画时,需要
进行 done 回调
,否则它们将会被同步调用,过渡会立即完成 - 添加
:css="false"
,也会让 Vue 会跳过CSS 的检测
,除了性能略高之外,这可以避免过渡过程中 CSS 规则的影响 - gsap库的使用
- 那么接下来我们就可以结合gsap库来完成动画效果
- gsap实现数字变化
- 在一些项目中,我们在一些项目中,我们会见到数字快速变化的动画效果,这个动画可以很容易通过gsap来实现
-
十、列表的过渡
认识
目前为止,过渡动画我们只是
针对单个元素或者组件
的
要么是单个节点
要么是同一时间渲染多个节点中的一个
那么如果希望渲染的是一个列表,并且该列表中添加删除数据也希望有动画执行呢?
这个时候我们要使用<transition-group>
组件来完成使用
<transition-group>
有如下的特点
默认
情况下,它不会渲染一个元素的包裹器
,但是你可以指定一个元素并以 tag attribute 进行渲染
过渡模式不可用
,因为我们不再相互切换特有的元素
内部元素总是需要提供唯一的 key attribute 值
CSS 过渡的类将会应用在内部的元素
中,而不是这个组/容器本身
列表过渡的基本使用
- 我们来做一个案例
- 案例是一列数字,可以继续添加或者删除数字;
- 在添加和删除数字的过程中,对添加的或者移除的数字添加动画
- 我们可以通过使用一个新增的
v-move
的class来完成其他需要移动的节点是没有动画的问题 - 它会在元素改变位置的过程中应用
- 像之前的名字一样,我们可以通过name来自定义前缀
<template><div><button @click="addNum">添加数字</button><button @click="removeNum">删除数字</button><button @click="shuffleNum">数字洗牌</button><transition-group tag="p" name="why"><span v-for="item in numbers" :key="item" class="item">{{item}}</span></transition-group></div>
</template><script>import _ from 'lodash';export default {data() {return {numbers: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],numCounter: 10}},methods: {addNum() {// this.numbers.push(this.numCounter++)this.numbers.splice(this.randomIndex(), 0, this.numCounter++)},removeNum() {this.numbers.splice(this.randomIndex(), 1)},shuffleNum() {this.numbers = _.shuffle(this.numbers);},randomIndex() {return Math.floor(Math.random() * this.numbers.length)}},}
</script><style scoped>.item {margin-right: 10px;display: inline-block;}.why-enter-from,.why-leave-to {opacity: 0;transform: translateY(30px);}.why-enter-active,.why-leave-active {transition: all 1s ease;}.why-leave-active {position: absolute;}.why-move {transition: transform 1s ease;}
</style>
列表的交错过渡案例
- 我们来通过gsap的延迟delay属性,做一个交替消失的动画
<template><div><input v-model="keyword"><transition-group tag="ul" name="why" :css="false"@before-enter="beforeEnter"@enter="enter"@leave="leave"><li v-for="(item, index) in showNames" :key="item" :data-index="index">{{item}}</li></transition-group></div>
</template><script>import gsap from 'gsap';export default {data() {return {names: ["abc", "cba", "nba", "why", "lilei", "hmm", "kobe", "james"],keyword: ""}},computed: {showNames() {return this.names.filter(item => item.indexOf(this.keyword) !== -1)}},methods: {beforeEnter(el) {el.style.opacity = 0;el.style.height = 0;},enter(el, done) {gsap.to(el, {opacity: 1,height: "1.5em",delay: el.dataset.index * 0.5,onComplete: done})},leave(el, done) {gsap.to(el, {opacity: 0,height: 0,delay: el.dataset.index * 0.5,onComplete: done})}}}
</script><style scoped>/* .why-enter-from,.why-leave-to {opacity: 0;}.why-enter-active,.why-leave-active {transition: opacity 1s ease;} */
</style>
vue3过渡和动画详解相关推荐
- css元素转换(旋转函数、rotateX 和 rotateY 的使用、移动函数、缩放函数、过渡、动画)详解
文章目录 旋转函数 rotateX 和 rotateY 的使用 移动函数 缩放函数 过渡 transition-timing-function 属性 动画 旋转函数 在 CSS3 中,使用 rotat ...
- 超级强大的SVG SMIL animation动画详解
超级强大的SVG SMIL animation动画详解 本文摘自超级强大的SVG SMIL animation动画详解_Zoomla!逐浪CMS官网 (z01.com),网站看上去有年头了,担心哪天会 ...
- [转]超级强大的SVG SMIL animation动画详解
超级强大的SVG SMIL animation动画详解 本文花费精力惊人,具有先驱前瞻性,转载规则以及申明见文末,当心予以追究. 本文地址:http://www.zhangxinxu.com/word ...
- Android 动画详解-思维导图版
转载请注明链接: https://blog.csdn.net/feather_wch/article/details/81503233 涉及视图动画(补间动画.逐帧动画).属性动画三种动画的使用方法, ...
- 学习笔记-Flutter 动画详解(一)
Flutter 动画详解(一) 本文主要介绍了动画的原理相关概念,对其他平台的动画做了一个简要的梳理,并简要的介绍了Flutter动画的一些知识. 1. 动画介绍 动画对于App来说,非常的重要.很多 ...
- Unity中的Animator动画详解
Unity中的Animator动画详解 Animator动画导入 Animator动画详解 动画类型选择 Rig面板属性 Mode面板属性 Animation面板属性 动画片段 控制使用 Animat ...
- iOS核心动画详解swift版----基础动画
2019独角兽企业重金招聘Python工程师标准>>> iOS核心动画详解swift版---基础动画 创建工程,添加2个ViewController,通过rootViewContro ...
- [转] ReactNative Animated动画详解
http://web.jobbole.com/84962/ 首页 所有文章 JavaScript HTML5 CSS 基础技术 前端职场 工具资源 更多频道▼ - 导航条 -首页所有文章JavaScr ...
- Android Animation动画详解(二): 组合动画特效
前言 上一篇博客Android Animation动画详解(一): 补间动画 我已经为大家介绍了Android补间动画的四种形式,相信读过该博客的兄弟们一起都了解了.如果你还不了解,那点链接过去研读一 ...
最新文章
- html超链接button
- 微信 Tinker 负责人张绍文关于 Android 热修复直播分享记录
- 装完nvme固态经常蓝屏_微软确认Win10 20H2使用雷电连接固态盘会直接蓝屏死机
- 谈谈Javascript闭包
- android file.createnewfile ioexception
- (转)个例子让你了解Java反射机制
- 由键盘下陷引起的奇怪事件
- 手机当电脑麦克风 linux,WO Mic让手机成为电脑的无线麦克风
- 360剑灵洪门崛起服务器维护,剑灵洪门崛起————【维护】8月1日更新维护公告...
- 基于Tablestore多元索引打造亿量级店铺搜索系统
- bloomberg用法 固定收益_干货 | 日语高考高频考点:助词を的用法
- 专题开发十三:JEECG微云快速开发平台-附录
- 计算机文化基础课程实验,山东经贸职业学院计算机文化基础课程实验教学大纲.doc...
- python装饰器代码简洁_Python基础知识之装饰器(示例代码)
- 【PAT甲】1006 Sign In and Sign Out (25分)循环模拟
- Fiddler配置https
- 台达plc控制伺服电机编程实例_plc控制伺服电机程序实例讲解!成功都是可以复制的!...
- 基于PYTHON语言的工资管理系统制作(前言计划)
- 计算机枚举法教案,简单枚举算法教案.ppt
- 详解双曲函数(对比三角函数推导)