vuejs制作背景淡入淡出切换动画的实例

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