這篇文章主要介紹vuejs如何制作背景淡入淡出切換動(dòng)畫(huà)，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

成都創(chuàng)新互聯(lián)是網(wǎng)站建設(shè)專(zhuān)家,致力于互聯(lián)網(wǎng)品牌建設(shè)與網(wǎng)絡(luò)營(yíng)銷(xiāo)，專(zhuān)業(yè)領(lǐng)域包括網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、電商網(wǎng)站制作開(kāi)發(fā)、微信小程序開(kāi)發(fā)、微信營(yíng)銷(xiāo)、系統(tǒng)平臺(tái)開(kāi)發(fā)，與其他網(wǎng)站設(shè)計(jì)及系統(tǒng)開(kāi)發(fā)公司不同，我們的整合解決方案結(jié)合了恒基網(wǎng)絡(luò)品牌建設(shè)經(jīng)驗(yàn)和互聯(lián)網(wǎng)整合營(yíng)銷(xiāo)的理念，并將策略和執(zhí)行緊密結(jié)合，且不斷評(píng)估并優(yōu)化我們的方案，為客戶提供全方位的互聯(lián)網(wǎng)品牌整合方案！

安裝好vuejs之后，在components里添加Background.vue

代碼如下

.bg{
 position: fixed;
 left: 0px;
 top:0px;
 background-color: rgb(180, 180, 180);
 height: 100%;
 width: 100%;
 min-width: 1000px;
 z-index: -100;
 background-position: center 0;
 background-repeat: no-repeat;
 background-size: cover;
 -webkit-background-size: cover;
 -o-background-size: cover;
 zoom: 1;
}
img{
 display: inline-block;
 position: relative;
 width: 100%;
 height: 100%;
 vertical-align: middle;
 z-index: -99;
}
.screen{
 width: 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"
 },
 {
 "fileName" : "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"
 }
]

如果路由不會(huì)的話看一下網(wǎng)上的資料

碰到的問(wèn)題

1.在vue中想直接讓頁(yè)面加載時(shí)運(yùn)行函數(shù)的話將函數(shù)放在mounted對(duì)象里面。

2.函數(shù)放在methods 中

vue-resource用法 //用來(lái)獲取圖片的json數(shù)據(jù)
this.$http.get(url).then(response =>{
  console.log(response.body);
 },response =>{
 console.log(response.body);
 });
 }

4.用vue-resource時(shí)需要把

import VueResource from 'vue-resource'
Vue.use(VueResource);

寫(xiě)到main.js中去

5.mounted函數(shù)中，需要將運(yùn)行函數(shù)放在

this.$nextTick(function () {
 .........
})

中

6.在vue中用velocity-animate

npm install velocity-animate --save -dev

在main.js中加入

import Velocity from 'velocity-animate'

7.多圖片循環(huán)過(guò)度效果

這里研究了很久，頁(yè)面進(jìn)去之后會(huì)直接從leave函數(shù)開(kāi)始運(yùn)行，不是想象的從beforeEnter開(kāi)始。后來(lái)終于弄清楚為什么了，把show: true改成show: false，則可以讓頁(yè)面從beforeEnter前開(kāi)始。

這個(gè)是參照vuejs的手冊(cè)的，http://cn.vuejs.org/v2/guide/transitions.html這里是關(guān)于過(guò)度效果的所有方面的東西。感覺(jué)能省很多代碼。