版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
第7章过渡与动画
课程目标本节将从CSS过渡transition、CSS动画animation及配合使用第三方CSS动画库(如animate.css)这三方面来详细介绍Vue过渡效果与Vue动画效果。2课程内容
过渡与动画概述Transition组件过渡的命名单元素/组件的过渡实现过渡动画的三种方式多元素/组件的过渡综合案例37.1简述4Vue实现了过渡与动画，Vue的过渡系统可以在元素从DOM中插入或移除时，自动应用过渡效果。Vue.js会在适当的时机为触发CSS过渡或动画，也可以提供相应JavaScript钩子函数，在过渡过程中执行自定义的DOM操作。7.1transition组件5在Vue中，提供了实现过渡动画的内置组件transition。基本用法就是给我们需要动画的标签外面
嵌套transition标签，并且加上属性。实现过渡动画一般格式：使用过渡组件transition。<transitionname=“fade”><!--需要动画的div标签--><div></div></transition>7.1transition组件6Vue提供了6个CSS类名在enter/leave的过渡中切换。7.1transition组件7
transition组件的具体使用，及CSS类名的使用。<!DOCTYPEhtml><html><head><metacharset-"utf-8"/><title>斤斗云学堂</title><style>.v-enter{opacity:0;}.v-enter-active{transition:opacity.5s;}.v-leave-active{transition:transfor.5s;}.v-leave-to{transform:translateX(10px);}</style>7.1transition组件8</head><body><divid="demo"><buttonv-on:click="show=!show">Toggle</button><transition><pv-if="show">我是精灵小天使</p></transition></div><scripttype="text/javascript"src="../js/Vue.js"></script><script>newVue({el:'#demo’,data:{show:true}})</script></body></html>7.1transition组件如果transition组件定义了name,这时所有“v-”开头的class类名更换为“fade-”开头。9<style>
.
fade-enter{opacity:0;
}
.fade-enter-active{
transition:opacity
.5s;}
.
fade-
leave-active{
transition:transform
.5s;}
.
fade-
leave-to{
transform:
translateX(10px);}
</style>7.2
单元素、组件的过渡Vue提供了transition的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡。10条件渲染（使用v-if）组件根节点条件展示（使用v-show）动态组件7.2
单元素、组件的过渡实现过渡动画通常有如下几种方式:利用Vue中的钩子函数实现动画。利用animate.css结合transition实现动画。使用Vue的transition标签结合CSS样式实现动画7.2.1transition标签结合CSS样式实现动画常用的过渡使用通常使用CSS过渡。在代码中设置CSS样式来实现过渡fade-enter-active、fade-leave-active、fade-enter、fade-leave-to。【例7-1】transition+css实现过渡动画：12<!DOCTYPE
html><html>
<head>
<meta
charset="utf-8"
/><title>斤斗云学堂</title><style>.
button{
width:400px;height:
40px;
line
-height:40px;
background-color
:#FFDAB9;text-align:center;}7.2.1transition标签结合CSS样式实现动画13p{
width:400px;margin:0;
background-color:
#FFFACD;}
.
fade-enter-active,.fade-leave-active
{
transition:
opacity
.5s;
}
.
fade-enter,.
fade-leave-to
/*.fade-leave-active
below
version
2.1.8*/{
opacity:
0;}
</style></head><body>
<div
id-“demo”>
<div
class=“button”
v-on:click=“show
=
!
show”
>
Toggle
</div>
<transition
name="fade">执行变换属性为透明，变换时间0.5毫秒。7.2.1transition标签结合CSS样式实现动画14
<p
v-if="show">斤斗云学堂(
http://www.hS)是一款专业学习
IT开发知识技能的慕课平台，内容涵盖前端开发，JAVA，
大数据，电子商务等。斤斗云学堂已累计培养数千学员，使学员在IT学习和就业方面得到了很大的帮助，也愿意在你学习和就业的路上祝你一臂之力，实现腾飞斤斗云学堂现在每天都有千余名学生在线学习，平台有完整的学习课件，题库，作业系统，学员可以在线学课程，交作业。学生通过按照学习大纲要求，视频学习，每节课测验，交作业，参加阶段考试，项目实训，掌握开发技能。</p>
</transition>
</div>
<script
type="
text/javascript"
src="
../js/Vue.js"></script>
<script>
new
Vue({
el:
'#demo’,
data:{
show:
true
}
})</script>
</body>
</html>7.2.1transition标签结合CSS样式实现动画单击Toggle显示或隐藏段落，运行结果如图7-2所示。157.2.2animate.css结合transition实现动画首先来介绍下自定义过渡类名，在实现动画中会用到，可以通过以下特性来自定义过渡类名：16enter-active-classenter-classenter-to-classleave-classleave-active-classleave-to-class它们的优先级高于普通的类名，对于Vue的过渡系统和其他第三方CSS动画库，如animate.css相结合使用非常有用。7.2.2animate.css结合transition实现动画【例7-2】animate.css+transition实现动画17<!DOCTYPE
html><html><head>
<meta
charset=
“utf-8”
/>
<title>Vue自定义过渡类名</title>
<link
href=
"
https://cdn.
/
npm/animate.css@3.5.1"
rel="stylesheet"type=
"text/css">
</head><body>
<div
id="demo"
>
<button
@click="show
=
!
show">
Toggle
render<
/button>
7.2.2animate.css结合transition实现动画18<transition
name="
custom-classes
-transition"
enter-active-class="animated
tada"leave-active-class="
animated
bounceOutRight">
<p
v-if="show"
>hello</p></transition></div>
<script
src="../js/Vue.js"></script><script>new
Vue({
el:
'#demo’,data:
{
show:
true
}
})
</script></body></html>
7.2.2animate.css结合transition实现动画引入第三方animate.css动画文件，设定动画效果enter-active-class="animatedtada"leave-active-class="animatedbounceOutRight"。运行结果如图7-3所示。197.2.3钩子函数实现动画【例7-3】钩子函数实现动画20
<!DOCTYPE
html><html><head>
<meta
charset="UTF-8">
<meta
name
"viewport"
content=
"width=device-width,
initial-scale=1.0"><title>
使用Vue钩子函数实现动画</title><style>
.show
{
transition:
all
0.5s;}
</style></head><body>
<div
id=“app”>
<button
@click=“loggle”>
显示/隐藏</button><br>
<transition
@before-enter="beforeEnter"@enter="enter"@after-enter="afterEnter"v-bind:css="false">
<div
class="show"
v-show-"isshow">hello
world</div></transition></div>
<script
src='.
./js/Vue.js"></script>7.2.3钩子函数实现动画21<script>new
Vue({
el:
'#app'
,data:{isshow:false}，
methods:{ toggle:function(){this-isshow=!this.isshow;}，
beforeEnter:function(el){console.log("beforeEnter”);el.style="padding-left:100px";}，
enter:function(el,done){el.offsetHeight;el.style="padding-left:0px";done();}，
afterEnter:function(el){console.log("afterEnter");}}})</script></body></html>7.2.3钩子函数实现动画例7-3运行后单击显示/隐藏，helloworld从右向左过渡，再次单击隐藏运行结果如图7-4所示227.3多个元素的过渡常见的多元素过渡是一个列表、表格或者描述这个列表表格，为空消息的元素，如下代码片段。使用CSS过渡实现列表和标签的过渡。237.3多个元素的过渡使用CSS过渡实现列表<ul>和<p>标签的过渡使用fade-enter、fade-leave-to、fade-enter-active、fade-leave-active等CSS类名实现过渡单击“清空数据”按钮，过渡显示<p>标签，单击“重置”按钮，重新加载data中的数据。2413. <divid="app">14. <button@click="clear">清空数据</button>15. <button@click="reset">重置</button>16. <transitionname="fade">17. <ulv-if="items.length>0">18. <liv-for="iteminitems">{{item}}</li>19. </ul>20. <pv-else>没有显示的数据.</p>21. </transition>22. </div>23. <scriptsrc="../js/vue.js"></script>24. <script>25. newVue({26. el:'#app',27. data:{28. items:['JavaScript高级','Vue','CSS3']29. },30. methods:{31. clear:function(){32. this.items.splice(0);33. },34. reset:function(){35. history.go();36. }37. }38. })
单击“清空数据”按钮，过渡显示<p>标签，单击“重置”按钮，重新加载data中的数据。多个元素的过渡两个相同的标签，发现并没
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 宝鸡文理学院《模拟招聘》2022-2023学年第一学期期末试卷
- 木浆板文具相关项目建议书
- 【初中化学】酸碱盐方程式以及反应规律（收藏学习）
- 投币启动设备用机械装置市场环境与对策分析
- 喷香水器市场环境与对策分析
- 抗组胺剂项目评价分析报告
- 描图布项目可行性实施报告
- 开酒器相关项目实施方案
- 调车组试题百题
- 什么是数据架构（华为）
- 新能源汽车全国运输服务协议样本版
- 期中测试卷（1-4单元）（试题）-2024- 2025学年六年级上册数学人教版
- 期中试卷-2024-2025学年统编版语文五年级上册
- 第四单元测试卷（四）（单元测试）-2024-2025学年四年级语文上册统编版
- 期中检测卷-2024-2025学年语文六年级上册（统编版）
- 2《长征胜利万岁》《大战中的插曲》群文阅读教学设计 2023-2024学年统编版高中语文选择性必修上册
- 统编版（2024新版）七年级上册历史第三单元 秦汉时期：统一多民族封建国家的建立和巩固 复习课件
- 2024标准物业管理委托合同示范文本
- 2024年新人教版数学七年级上册 3.2 求代数式的值 教学课件
- 4《在民族复兴的历史丰碑上-2020中国抗疫记》教学设计统编版高中语文选择性必修上册
- 房屋室内装修合同
评论
0/150
提交评论