vuejs制作背景淡入淡出切换动画的实例_第1页
vuejs制作背景淡入淡出切换动画的实例_第2页
vuejs制作背景淡入淡出切换动画的实例_第3页
vuejs制作背景淡入淡出切换动画的实例_第4页
vuejs制作背景淡入淡出切换动画的实例_第5页
全文预览已结束

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

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. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论