vuejs 制作背景淡入淡出切换动画的实例
编程学习 2021-07-04 16:46www.dzhlxh.cn编程入门
今天长沙网络推广就为大家分享一篇vuejs 制作背景淡入淡出切换动画的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随长沙网络推广过来看看吧
安装好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的手册的，这里是关于过度效果的所有方面的东西。感觉能省很多代码。
<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 制作背景淡入淡出切换动画的实例就是长沙网络推广分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持狼蚁SEO。