安裝好vuejs之后，在components里添加Background.vue
代碼如下
<template> <div class="Background"> <div class="bg"> <transition v-bind:css="false" v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:leave="leave"> <img v-bind:src="showImg" v-if="show" /> </transition> </div> <div class="screen"></div> </div></template><script>export default { name: 'background', data () { return { imgs: [], isAnimate:false, showImg: "static/bg/0.jpg", showIndex: 0, show: true } }, mounted:function(){ this.$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) { var vm = this; Velocity(name, { opacity: 1 , scale: 1.2, rotateZ: "3deg"}, { duration: 6000, complete: function () { done(); vm.show = false; } } ); }, leave: function (name, done) { var vm = this; Velocity(name, { opacity: 0 , scale: 1, rotateZ: "0deg"}, { duration: 6000, complete: function () { done() vm.showImg = vm.imgs[vm.showIndex==6 ? vm.showIndex=0 : vm.showIndex+=1 ].imgURL; vm.show = true; } } ); } }}</script><!-- Add "scoped" attribute to limit CSS to this component only --><style scoped>.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;}</style>圖片的json數據如下
[ { "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" }]如果路由不會的話看一下網上的資料
碰到的問題
1.在vue中想直接讓頁面加載時運行函數的話將函數放在mounted對象里面。
2.函數放在methods 中
vue-resource用法 //用來獲取圖片的json數據this.$http.get(url).then(response =>{ console.log(response.body); },response =>{ console.log(response.body); }); }4.用vue-resource時需要把
import VueResource from 'vue-resource'Vue.use(VueResource);
寫到main.js中去
5.mounted函數中，需要將運行函數放在
this.$nextTick(function () { .........})中
6.在vue中用velocity-animate
npm install velocity-animate --save -dev
在main.js中加入
import Velocity from 'velocity-animate'
7.多圖片循環過度效果
這里研究了很久，頁面進去之后會直接從leave函數開始運行，不是想象的從beforeEnter開始。后來終于弄清楚為什么了，把show: true改成show: false，則可以讓頁面從beforeEnter前開始。
這個是參照vuejs的手冊的，http://cn.vuejs.org/v2/guide/transitions.html這里是關于過度效果的所有方面的東西。感覺能省很多代碼。
<div class="bg"> <transition v-bind:css="false" v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:leave="leave"> <img v-bind:src="showImg" v-if="show" /> </transition></div>
<script>export default { name: 'background', data () { return { imgs: [], isAnimate:false, showImg: "static/bg/0.jpg", showIndex: 0, show: true } }, mounted:function(){ this.$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) { var vm = this; Velocity(name, { opacity: 1 , scale: 1.2, rotateZ: "3deg"}, { duration: 6000, complete: function () { done(); vm.show = false; } } ); }, leave: function (name, done) { var vm = this; Velocity(name, { opacity: 0 , scale: 1, rotateZ: "0deg"}, { duration: 6000, complete: function () { done() vm.showImg = vm.imgs[vm.showIndex==6 ? vm.showIndex=0 : vm.showIndex+=1 ].imgURL; vm.show = true; } } ); } }}</script>以上這篇vuejs 制作背景淡入淡出切換動畫的實例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。
新聞熱點
疑難解答
