html5背景如何淡入淡出,vuejs 制作背景淡入淡出切换动画的实例

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

代码如下

v-bind:css="false"

v-on:before-enter="beforeEnter"

v-on:enter="enter"

v-on:leave="leave">

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;

}

}

);

}

}

}

.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数据如下

[

{

"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前开始。

v-bind:css="false"

v-on:before-enter="beforeEnter"

v-on:enter="enter"

v-on:leave="leave">

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;

}

}

);

}

}

}

以上这篇vuejs 制作背景淡入淡出切换动画的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。