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 相关文章推荐
8个超棒的学习 jQuery 的网站 推荐收藏
Apr 02 Javascript
JavaScript高级程序设计(第3版)学习笔记10 再访js对象
Oct 11 Javascript
可以浮动某个物体的jquery控件用法实例
Jul 24 Javascript
Vue.js Ajax动态参数与列表显示实现方法
Oct 20 Javascript
JS验证全角与半角及相互转化的介绍
May 18 Javascript
JavaScript递归算法生成树形菜单
Aug 15 Javascript
bootstrap日期插件daterangepicker使用详解
Oct 19 Javascript
Angular 组件之间的交互的示例代码
Mar 24 Javascript
vuejs 切换导航条高亮(路由菜单高亮)的方法示例
May 29 Javascript
JS高级技巧(简洁版)
Jul 29 Javascript
webpack4之如何编写loader的方法步骤
Jun 06 Javascript
JS实现手写 forEach算法示例
Apr 29 Javascript
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
拼音码表的生成
2006/10/09 PHP
php中自定义函数dump查看数组信息类似var_dump
2014/01/27 PHP
基于Swoole实现PHP与websocket聊天室
2016/08/03 PHP
php读取和保存base64编码的图片内容
2017/04/22 PHP
thinkPHP中U方法加密传递参数功能示例
2018/05/29 PHP
PHP bin2hex()函数基础实例讲解
2019/02/11 PHP
JQuery 写的个性导航菜单
2009/12/24 Javascript
JavaScript DOM 学习第三章 内容表格
2010/02/19 Javascript
javascript 模式设计之工厂模式学习心得
2010/04/27 Javascript
ASP.NET jQuery 实例10 动态修改hyperlink的URL值
2012/02/03 Javascript
JS分页控件 可用于无刷新分页
2013/07/23 Javascript
Jquery动态添加及删除页面节点元素示例代码
2014/06/16 Javascript
js字符串操作方法实例分析
2015/05/06 Javascript
JS自定义选项卡函数及用法实例分析
2015/09/02 Javascript
探寻JavaScript中this指针指向
2016/04/23 Javascript
基于javascript编写简单日历
2016/05/02 Javascript
使用Node.js搭建静态资源服务详细教程
2017/08/02 Javascript
JS复杂判断的更优雅写法代码详解
2018/11/07 Javascript
JavaScript实现简单的计算器
2020/01/16 Javascript
JS FormData对象使用方法实例详解
2020/02/12 Javascript
Vue中el-form标签中的自定义el-select下拉框标签功能
2020/04/20 Javascript
[04:30]显微镜下的DOTA2第五期——拉比克
2013/09/26 DOTA
python字符串加密解密的三种方法分享(base64 win32com)
2014/01/19 Python
python爬虫之线程池和进程池功能与用法详解
2018/08/02 Python
用python一行代码得到数组中某个元素的个数方法
2019/01/28 Python
Python获取好友地区分布及好友性别分布情况代码详解
2019/07/10 Python
python简单利用字典破解zip文件口令
2020/09/07 Python
基于Python实现粒子滤波效果
2020/12/01 Python
Python第三方库安装缓慢的解决方法
2021/02/06 Python
Nike荷兰官方网站:Nike.com (NL)
2018/04/19 全球购物
如何写出高质量、高性能的MySQL查询
2014/11/17 面试题
初三化学教学反思
2014/01/23 职场文书
市场营销专业大学生职业生涯规划文
2014/03/06 职场文书
清明节演讲稿
2014/05/27 职场文书
2014年学校团委工作总结
2014/12/20 职场文书
Go语言 详解net的tcp服务
2022/04/14 Golang