vuejs怎么制作背景淡入淡出切换动画

本篇内容介绍了"vuejs怎么制作背景淡入淡出切换动画"的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

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

代码如下

图片的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这里是关于过度效果的所有方面的东西。感觉能省很多代码。

"vuejs怎么制作背景淡入淡出切换动画"的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注网站，小编将为大家输出更多高质量的实用文章！