这篇文章主要介绍“vue怎么实现背景淡入淡出切换动画”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“vue怎么实现背景淡入淡出切换动画”文章能帮助大家解决问题。
安装好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前开始。
<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>vue是什么
Vue是一套用于构建用户界面的渐进式JavaScript框架，Vue与其它大型框架的区别是，使用Vue可以自底向上逐层应用，其核心库只关注视图层，方便与第三方库和项目整合，且使用Vue可以采用单文件组件和Vue生态系统支持的库开发复杂的单页应用。
关于“vue怎么实现背景淡入淡出切换动画”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注编程网行业资讯频道，小编每天都会为大家更新不同的知识点。
