安装好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="/UploadFiles/2021-04-02/showImg">图片的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这里是关于过度效果的所有方面的东西。感觉能省很多代码。
<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="/UploadFiles/2021-04-02/showImg"><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 制作背景淡入淡出切换动画的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年09月25日
2024年09月25日
- 纯音入心系列纯音乐《天籁古筝》1CD[MP3][331MB]
- 男女对唱典藏天碟《发烧对唱·那个季节里的歌DSD》10CD[WAV]
- 群星2010-歌林精选辑[歌林][WAV+CUE]
- TrioZimbalist-PianoTriosofWeinberg,Auerbach,Dvorak(2024)[24-44,1]wav
- 群星.1992-滚石第一流台湾歌·12王牌大车拼【滚石】【WAV+CUE】
- 林子祥.1984-创作歌集【华纳】【WAV+CUE】
- 周汤豪.2010-周汤豪【华纳】【FLAC分轨】
- Mozart-TheStringQuintets-AmadeusQuartet,CecilAronowitz(2017)[24-44,1][WAV+CUE]
- JamesWilliamsDennisIrwin-Focus(2024,Red)[24-48]FLAC
- 藤泽麻衣《空みあげて》[WAV]
- 纯音入心系列纯音乐《中国古筝经典名曲》1CD[MP3][1.3GB]
- 纯音入心系列纯音乐《古筝新奏:岁月静好与筝语,细水流年与筝同》1CD[MP3][846.9MB]
- 670《脆弱敏感小女生》[320K/MP3][27.53MB]
- 曾琳.2011-好好爱我【南方】【WAV+CUE】
- 范晓萱.1995-RAIN【福茂】【WAV+CUE】