vue基础:Vue动画
文章目录
- vue动画
- 前言
- 什么是Vue动画,它能用在哪些场景?
- vue动画的两个状态切换
- 进入( enter )
- 退出;离开( leave )
- vue动画为我们提供了什么?
- 要完成一个动画,我们还需要补充些什么?
- 一个动画案例
- 1. 确保框架引入和基本骨架搭建
- 2. html部分
- 3. 定义元素的添加和删除方法,以及初始化数据
- 4. 定义过度动画的css样式
- 5.看最后效果:
vue动画
前言
本文将围绕是什么、有什么用、怎么用的话题,讲讲vue动画的特点和如何使用
什么是Vue动画,它能用在哪些场景?
过渡是由一个状态变为另一个状态的过程,而动画就是过程的集合了【个人以为】。
“Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果”,即Vue的动画是作用是让元素在改变前添加一些过度效果。这样可以让用户在视觉和交互上有更好的体验。
看个例子,代码如下,直接复制就可以有效果。没看明白没关系,继续看之后的内容
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script><title></title><style type="text/css">/* 设置持续时间和动画函数 */.v-enter-active,.v-leave-active {transition: all .8s ease;}.v-enter, .v-leave-to{transform: translateX(100px);opacity: 0;}</style>
</head>
<body><div id="app"><button @click="show = !show">切换</button><transition><p v-show="show">hello</p></transition></div><script type="text/javascript">let vue = new Vue({el:'#app',data:{show:true,},})</script>
</body>
</html>
vue动画的两个状态切换
触发条件可以是元素删除,添加,数组或列表内容的更新。这里使用v-show
来修改元素状态
进入( enter )
对于v-show
来说,当他的条件由false
转为true
为进入(v-if
也一样)。条件为真说明是展示元素
对于的触发的css类为(默认):v-enter
、v-enter-to
、v-enter-active
,其中v-enter-active
是包括了v-enter、v-enter-to
两个过程,一般用于设置过度时间。
触发顺序是:v-enter
——> v-enter-to
;
v-enter
和v-enter-active
同时执行
上面的案例中,用v-enter-active
定义了过度效果,v-enter
定义进入的初始状态,v-enter-to
定义进入的最终状态
.v-enter-active{transition: all .8s ease;
}
.v-enter{transform: translateX(100px);opacity: 0;
}
/* .v-enter-to{} 最终状态没定义,以默认为当前为的状态 */
退出;离开( leave )
对于v-show
来说,当他的条件由true
转为false
为退出(v-if
也一样)。条件为真说明是隐藏元素
对于的触发的css类为(默认):v-leave
、v-leave-to
、v-leave-active
,其中v-leave-active
是包括了v-leave、v-leave-to
两个过程,一般用于设置过度时间。
触发顺序是:v-leave
——> v-leave-to
;
v-enter
和v-enter-active
同时执行
上面的案例中,用v-leave-active
定义了过度效果,v-leave
定义进入的初始状态,v-leave-to
定义进入的最终状态
.v-leave-active{transition: all .8s ease;
}
.v-leave{transform: translateX(100px); opacity: 0;
}/* .v-leave-to{} 最终状态没定义,以默认为当前为的状态 */
由于部分代码是一样的,最终合成了以上的css代码
/* 设置持续时间和动画函数 */
.v-enter-active,.v-leave-active {transition: all .8s ease;
}
.v-enter, .v-leave-to{transform: translateX(100px);opacity: 0;
}
vue动画为我们提供了什么?
Vue动画为我们提供了一个<transition></transition>
、<transition-group></transition-group>
组件用于包裹要添加过度动画的元素和一套规则。标签、动画进和出的两个过程及对应其动画类名的定义,还有动画的回调函数
<transition></transition>
<transition-group></transition-group>
// 类名部分
.v-enter{} //
.v-enter-to{}
.v-leave{}
.v-leave-to{}
.v-leave-active{}
.v-enter-active{}
// 回调函数部分。这里还不熟悉,本文不讲回调部分
v-on:before-enter="beforeEnter" //进入前的回调函数
v-on:enter="enter" // 进入的回调
v-on:after-enter="afterEnter" // 进入后的回调
v-on:enter-cancelled="enterCancelled" // emmv-on:before-leave="beforeLeave" // 退出前的回调
v-on:leave="leave" // 退出的回调
v-on:after-leave="afterLeave" // 退出执行后的回调
v-on:leave-cancelled="leaveCancelled" // emm
回调函数的参数是单曲的元素.这里还不熟悉,本文不讲回调部分
function enter(el){// 定义进入时的回调函数console.dir(el)
}
要完成一个动画,我们还需要补充些什么?
- 确保vue框架正确的引入了,
2.x
及以上版本 - 在需要添加过渡效果的元素上外添加标签
<transition>或<transition-group>
。包裹着过度的元素,如果有多个过度的话,为标签添加name="{自定义类名前缀}"
属性来区分css过度 - 给元素添加状态,可用是
v-if
,v-show
,数组增减等… - 定义过度动画每个状态的css属性:进入前后
v-enter-
…,退出前后v-leave
… - 改变元素状态,查看动画效果
一个动画案例
实现官网的一个数组添加和删除的动画案例
1. 确保框架引入和基本骨架搭建
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script><title></title><style type="text/css"></style>
</head>
<body><div id="app"></div><script type="text/javascript">let vue = new Vue({el:'#app',data:{},})</script>
</body>
</html>
2. html部分
<div id="app"><button @click="add">添加</button><button @click="remove">删除</button><!-- 因为是多个元素。这里用group标签,tag属性指明参与过度的是li标签 --><transition-group name="list" tag="li"><li v-for="item in listArr" :key="item">{{item}}</li></transition-group>
</div>
3. 定义元素的添加和删除方法,以及初始化数据
let vue = new Vue({el:'#app',data:{current:7,// 试用顺序添加是为了保持v-for的key的唯一性listArr:[0,1,2,3,4,5,6]},methods:{add(){console.dir(this.listArr)this.listArr.push(++this.current)},remove(){this.listArr.splice(0,1)}}
})
4. 定义过度动画的css样式
<style>
.list-enter-active, .list-leave-active {transition: all 1s;
}
.list-enter, .list-leave-to {/* 进入的初始状态和离开的最终状态 */opacity: 0;transform: translateY(30px);
}
/* .list-leave,.list-enter-to{}
不定义进入的最终状态和离开的初始状态。默认为原本的状态
*/
li{/* 去除列表前的点 */list-style: none;
}
</style>
5.看最后效果:
vue基础:Vue动画相关推荐
- VUE学习:vue基础20————动画02:动画
提示: VUE学习:vue基础20----动画01:过渡 VUE学习:vue基础20----动画02:动画 前言 动画 动画 使用动画完成过渡效果 第三方动画库的使用 使用第三方库: 钩子函数 前言 ...
- Vue基础-vue指令
一.vue基础-插值表达式 1.思考 1.以前改变标签内容,如何做? 2.用 Vue 有没有更简单的方式? 2.目的 在dom标签中, 直接插入内容 3.语法 又叫: 声明式渲染/文本插值 语法: { ...
- Vue基础--Vue中的双向绑定v-model指令
一.v-model的作用和使用场景 1.1 v-model指令介绍 期望的绑定值类型:根据表单输入元素或组件输出的值而变化 可以下下面元素使用: <input> <select> ...
- vue基础--vue的生命周期
一.什么是Vue生命周期 Vue实例从创建到销毁的过程. vue的每个组件从创建到销毁都会经历 是系统特定的过程,就是vue的生命周期. 二.生命周期介绍 1.阶段 vue的生命周期可以简单的分为四 ...
- 前端学习——vue基础知识
1. Vue初体验: 1.1 导入开发版本的Vue.js <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" ...
- Chapter1 Vue基础
Vue 基础 Vue 简介 Javascript 框架 必须遵守使用规则 简化Dom操作 Vue会自动用语法获取Dom元素 响应式数据驱动 第一个Vue程序 3 steps 官方文档: https:/ ...
- Vue中的基础过渡动画原理解析
前言 在日常开发中 动画是必不可少的一部分 不仅能让元素直接的切换显得更加自然 同时也能极大的增强用户体验 因此 在Vue之中也提供了非常强大的关于动画这方面的支持 Vue不仅支持用CSS来写一些过渡 ...
- Vue基础复习(2)Vue2.X过渡、动画和自定义指令
vue2.X过渡&动画和自定义指令 1. 过渡效果 2. 动画效果 3. Vue内置指令 4. 自定义指令 vue2.X过渡&动画和自定义指令 transition(过渡) anima ...
- 【Vue】Vue全家桶(三)Vue组件通信+Vue组件插槽+动画与过渡+使用vue-cli解决Ajax跨域问题
1 Vue组件通信 1.1 组件间通信基本原则 不要在子组件中直接修改父组件的状态数据 数据在哪, 更新数据的行为(函数)就应该定义在哪 1.2 vue 组件间通信方式 props vue 的自定义事 ...
最新文章
- android:activity的生命周期及它们之间的传值
- 当当网高可用架构之道--转
- SQL中关联表并使用子表的COUNT和SUM函数作为扩展字段
- rsync的原理——转载
- OpenCV cv :: Mat的串行输出功能的实例(附完整代码)
- 设计模式:程序员跳不开的坑
- 二十年来一直没搞清楚的一个问题
- Mybatis构建sql语法
- ccd相机好修吗_CCD到底值不值得买,CCD相机入坑全过程
- paip.ecshop邮件模板修改一个密码找回 一个留言回复
- presto字符串转日期
- 银行招聘笔试计算机知识,【银行招聘】银行考试笔试中的综合知识考什么?
- Win10 21H1发布后的首个更新上线 包含大量的修复内容
- WEB自动化-(RFS)RobotFramework+Selenium框架介绍测试流程详解
- 容器中启动ssh状态总是sshd is not running
- TimX_Ch1与TimX_Ch1N的差异
- MyISAM 与 InnoDB
- 夜雨寄北 文/江湖一劍客
- 有没有Mac游戏推荐?尤卡莱莉大冒险 for Mac
- iOS逆向之“修改微信运动步数”
热门文章
- 【TCP/IP】Nagle算法
- 国内最强的电子计算机专科学校,2021中国电子与计算机工程学专业大学排名 最好的高校排行榜...
- 异常检测的阈值,你怎么选?给你整理好了...
- 数字孪生在新型智慧医疗建设中的应用
- 得到一个任意数的每一位数字
- β-TCVAE (Isolating Sources of Disentanglement in Variational Autoencoders)
- 粤嵌星计划打卡第93天(javaweb html 标签)
- Java案例:随机点名程序
- 嵌入式Linux--Lichee Pi Zero系统烧录方式
- 二级计算机考哪个科目最好,计算机二级计算机二级考哪个科目比较好?