好资源导航 » 文章资讯 » vuejs 制作背景淡入淡出切换动画的实例

vuejs 制作背景淡入淡出切换动画的实例

2023-09-08 12:07:04 75

安装好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:center0;
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时需要把

importVueResourcefrom'vue-resource'
Vue.use(VueResource);

写到main.js中去

5.mounted函数中，需要将运行函数放在

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

中

6.在vue中用velocity-animate

npminstallvelocity-animate--save-dev

在main.js中加入

importVelocityfrom'velocity-animate'

7.多图片循环过度效果

这里研究了很久，页面进去之后会直接从leave函数开始运行，不是想象的从beforeEnter开始。后来终于弄清楚为什么了，把show:true改成show:false，则可以让页面从beforeEnter前开始。

这个是参照vuejs的手册的，http://cn.vuejs.org/v2/guide/transitions.html这里是关于过度效果的所有方面的东西。感觉能省很多代码。

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

返回顶部
514930285
czq8825@qq.com

vuejs 制作背景淡入淡出切换动画的实例

热门推荐

随机推荐