




下载本文档
版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
1、vuejs制作背景淡入淡出切换动画的实例安装好vuejs之后,在至添加s代码如下empltedivlassounddivlassnsitiov:cssfalsevefore-enter=beforeEnterventerenterveave=eavev-bid:src=showImgvsitivdivlassscreenvtematesexdefaulamegroundeturmgs:sAniate:lse,sstbg/0.jpgsdex:strueounted:fuhis.nextck(funhis.slse;his.eths:functionvhisthis;hisget(sts.imgs
2、response.bodyeforeEntefuncteame.styleame.styleransfosaleenterfuneevarvmis;elocme,scaleeZ:3degduraete:unctioe(vm.salse;und.vuejson).then(function(responsee(0deleave:functionvarvm=this;Velocity(name,scale:1,rotateZ:0dee,doneetedone()vm.showImg=vm.imgsvm.showIndex=6?vm.showIndex=0:vm.showIndex+=1.imgUR
3、L;vm.show=true;);.bgposition:fixed;left:0px;top:0px;background-color:rgb(180,180,180);height:100%;width:100%;min-width:1000px;z-index:-100;background-position:center0;background-repeat:no-repeat;background-size:cover;-webkit-background-size:cover;-o-background-size:cover;zoom:1;imgdisplay:inline-blo
4、ck;position:relative;width:100%;height:100%;vertical-align:middle;z-index:-99;.screenwidth:100%;height:100%;background-color:#444;z-index:-98;opacity:0.8;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=10);position:absolute;top:0px;left:0px;图片的json数据如下fileName:0.jpg,imgURL:static/bg/0.jpg,fil
5、eName:1.jpg,imgURL:static/bg/1.jpg,fileName:2.jpg,imgURL:static/bg/2.jpg,fileName:3.jpg,imgURL:static/bg/3.jpg,fileName:4.jpg,imgURL:static/bg/4.jpg,fileName:5.jpg,imgURL:static/bg/5.jpg,fileName:6.jpg,imgURL:static/bg/6.jpg如果路由不会的话看一下网上的资料碰到的问题1在vue中想直接让页面加载时运行函数的话将函数放在mounted对象里面。2.函数放在methods中vue
6、-resource用法用来获取图片的json数据this.$http.get(url).then(response=console.log(response.body);,response=console.log(response.body););用vue-resource时需要把importVueResourcefromvue-resourceVue.use(VueResource);写到main.js中去mounted函数中,需要将运行函数放在this.$nextTick(function()中在vue中用velocity-animatenpminstallvelocity-animate
7、-save-dev在main.js中加入importVelocityfromvelocity-animate多图片循环过度效果这里研究了很久,页面进去之后会直接从eave函数开始运行,不是想象的从beforeEnter开始。后来终于弄清楚为什么了,把show:true改成show:false,则可以让页面从beforeEnter前开始。exportdefaultname:background,data()returnimgs:,isAnimate:false,showImg:static/bg/0.jpg,showIndex:0,show:true,mounted:function()this
8、.$nextTick(function()this.show=false;this.bg_data(););,methods:bg_data:function()var_this=this;this.$http.get(static/data/bg.json).then(function(response)_this.imgs=response.body;);,beforeEnter:function(name)name.style.opacity=0;name.style.transform=scale(1)rotate(0deg);,enter:function(name,done)varvm=this;Velocity(name,opacity:1,scale:1.2,rotateZ:3deg,duration:6000,complete:function()done();vm.show=false;);,leave:function(name,done)varvm=this;Velocity(name,opacity:0,scale:1,rotateZ:0deg,duration:6000,complete:function()done()vm.showIm
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 广告投放策略实战作业指导书
- 物流行业绿色物流标准化建设案例分享
- 农村金融服务投资决策指南
- 网络系统管理与维护作业指导书
- 在线教育与网络学习资源开发指引
- 汽车行业售后服务实战指南
- 三农信息化技术应用作业指导书
- 酒泉2025年甘肃敦煌市市直机关及党群口事业单位选调21人笔试历年参考题库附带答案详解
- 贵州2025年贵州省财政厅厅属事业单位招聘5人笔试历年参考题库附带答案详解
- 湖南2025年湖南女子学院高层次人才招聘22人笔试历年参考题库附带答案详解
- 2024-2025学年第二学期天域全国名校协作体高三3月联考 语文试卷(含答案)
- 江苏省职教联盟2024-2025学年高二上学期校际联考期中调研测试语文卷(原卷版)
- 2025湘美版(2024)小学美术一年级下册教学设计(附目录)
- 2025年广东省中考物理模拟试卷一(含答案)
- 异位妊娠妇产科护理学讲解
- GB/T 5267.5-2024紧固件表面处理第5部分:热扩散渗锌层
- 2024成人肥胖食养指南(完整版)
- 2024年上海外服招聘笔试参考题库附带答案详解
- GB/T 25052-2010连续热浸镀层钢板和钢带尺寸、外形、重量及允许偏差
- 芳草湖农场医院卧床病人翻身卡
- 财税2016年第36号文[共94页]
评论
0/150
提交评论