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數(shù)據(jù)如下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如果路由不會的話看一下網(wǎng)上的資料碰到的問題1在vue中想直接讓頁面加載時運行函數(shù)的話將函數(shù)放在mounted對象里面。2.函數(shù)放在methods中vue

6、-resource用法用來獲取圖片的json數(shù)據(jù)this.$http.get(url).then(response=console.log(response.body);,response=console.log(response.body););用vue-resource時需要把importVueResourcefromvue-resourceVue.use(VueResource);寫到main.js中去mounted函數(shù)中，需要將運行函數(shù)放在this.$nextTick(function()中在vue中用velocity-animatenpminstallvelocity-animate

7、-save-dev在main.js中加入importVelocityfromvelocity-animate多圖片循環(huán)過度效果這里研究了很久，頁面進去之后會直接從eave函數(shù)開始運行，不是想象的從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