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


Posted in Javascript onSeptember 01, 2018

安装好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的手册的,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="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 制作背景淡入淡出切换动画的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
关于jquery append() html时的小问题的解决方法
Dec 16 Javascript
由Javascript实现的页面日历
Nov 04 Javascript
同一页面多个商品倒计时JS 基于面向对象的javascript
Feb 16 Javascript
JS判断文本框内容改变事件的简单实例
Mar 07 Javascript
zepto.js中tap事件阻止冒泡的实现方法
Feb 12 Javascript
jQuery解析json格式数据简单实例
Jan 22 Javascript
教你如何终止JQUERY的$.AJAX请求
Feb 23 Javascript
Bootstrap 模态框多次显示后台提交多次BUG的解决方法
Dec 26 Javascript
对Vue beforeRouteEnter 的next执行时机详解
Aug 25 Javascript
React Router V4使用指南(精讲)
Sep 17 Javascript
vue-cli打包后本地运行dist文件中的index.html操作
Aug 12 Javascript
js和jquery判断数据类型的4种方法总结
Aug 28 jQuery
vue解决使用webpack打包后keep-alive不生效的方法
Sep 01 #Javascript
解决vue-router在同一个路由下切换,取不到变化的路由参数问题
Sep 01 #Javascript
JS与jQuery判断文本框还剩多少字符可以输入的方法
Sep 01 #jQuery
vue初始化动画加载的实例
Sep 01 #Javascript
jQuery解析json格式数据示例
Sep 01 #jQuery
vue+vue-router转场动画的实例代码
Sep 01 #Javascript
Vue-router 切换组件页面时进入进出动画方法
Sep 01 #Javascript
You might like
PHP数据类型之布尔型的介绍
2013/04/28 PHP
使用PHP生成二维码的两种方法(带logo图像)
2014/03/14 PHP
laravel中的fillable和guarded属性详解
2019/10/23 PHP
Javascript 模式实例 观察者模式
2009/10/24 Javascript
JS面向对象编程 for Cookie
2010/09/19 Javascript
利用jQuery操作对象数组的实现代码
2011/04/27 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器
2013/06/21 Javascript
解决jquery1.9不支持browser对象的问题
2013/11/13 Javascript
学习JavaScript编程语言的8张思维导图分享
2015/03/27 Javascript
jquery实现平滑的二级下拉菜单效果
2015/08/26 Javascript
Javascript技术栈中的四种依赖注入详解
2016/02/23 Javascript
Cpage.js给组件绑定事件的实现代码
2017/08/31 Javascript
详解axios 全攻略之基本介绍与使用(GET 与 POST)
2017/09/15 Javascript
分享5个顶级的JavaScript Ajax组件库
2018/09/16 Javascript
Nodejs调用Dll模块的方法
2018/09/17 NodeJs
基于VUE实现的九宫格抽奖功能
2018/09/30 Javascript
微信 jssdk 签名错误invalid signature的解决方法
2019/01/14 Javascript
JS字符串与二进制的相互转化实例代码详解
2019/06/28 Javascript
JavaScript实现简单的图片切换功能(实例代码)
2020/04/10 Javascript
[49:17]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第三场 1月26日
2021/03/11 DOTA
Python cookbook(数据结构与算法)在字典中将键映射到多个值上的方法
2018/02/18 Python
Ubuntu下Python2与Python3的共存问题
2018/10/31 Python
python中PS 图像调整算法原理之亮度调整
2019/06/28 Python
微信小程序python用户认证的实现
2019/07/29 Python
html5 Canvas画图教程(11)—使用lineTo/arc/bezierCurveTo画椭圆形
2013/01/09 HTML / CSS
HTML5新特性之用SVG绘制微信logo
2016/02/03 HTML / CSS
加拿大领先的冒险和户外零售商:Atmosphere
2017/12/19 全球购物
大专生自我鉴定范文
2013/10/01 职场文书
三年级音乐教学反思
2014/01/28 职场文书
公益活动邀请函
2014/02/05 职场文书
走进科学观后感
2015/06/18 职场文书
欠条范文
2015/07/03 职场文书
浅谈resultMap的用法及关联结果集映射
2021/06/30 Java/Android
Oracle 死锁的检测查询及处理
2021/09/25 Oracle
Oracle中update和select 关联操作
2022/01/18 Oracle
Java 轮询锁使用时遇到问题
2022/05/11 Java/Android