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 相关文章推荐
chrome原生方法之数组
Nov 30 Javascript
JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享
Apr 11 Javascript
javascript中undefined与null的区别
Aug 16 Javascript
window.onload使用指南
Sep 13 Javascript
JS判断元素是否在数组内的实现代码
Mar 30 Javascript
图解Javascript——作用域、作用域链、闭包
Mar 21 Javascript
vue-cli配置文件——config篇
Jan 04 Javascript
js中document.write和document.writeln的区别
Mar 11 Javascript
JS实现查找数组中对象的属性值是否存在示例
May 24 Javascript
ES6 let和const定义变量与常量的应用实例分析
Jun 27 Javascript
超详细的5个Shell脚本实例分享(值得收藏)
Aug 15 Javascript
微信小程序scroll-view的滚动条设置实现
Mar 02 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
把77A收信机改造成收音机
2021/03/02 无线电
thinkphp3.2.3版本的数据库增删改查实现代码
2016/09/22 PHP
PHP+fiddler抓包采集微信文章阅读数点赞数的思路详解
2019/12/20 PHP
PHP实现一个按钮点击上传多个图片操作示例
2020/01/23 PHP
解决PHPstudy Apache无法启动的问题【亲测有效】
2020/10/30 PHP
jQuery 图像裁剪插件Jcrop的简单使用
2009/05/22 Javascript
JavaScript CSS 修改学习第四章 透明度设置
2010/02/19 Javascript
用JQuery 判断某个属性是否存在hasAttr的解决方法
2013/04/26 Javascript
JS 页面计时器示例代码
2013/10/28 Javascript
js特殊字符过滤的示例代码
2014/03/05 Javascript
jquery中EasyUI实现同步树
2015/03/01 Javascript
jquery使整个div区域可以点击的方法
2015/06/24 Javascript
JavaScript脚本库编写的方法
2015/12/09 Javascript
用nodejs的实现原理和搭建服务器(动态)
2016/08/10 NodeJs
jQuery 常见小例汇总
2016/12/14 Javascript
原生js实现密码输入框值的显示隐藏
2017/07/17 Javascript
JS实现websocket长轮询实时消息提示的效果
2017/10/10 Javascript
Vue项目自动转换 px 为 rem的实现方法
2018/10/29 Javascript
JS闭包经典实例详解
2018/12/20 Javascript
深入理解nodejs搭建静态服务器(实现命令行)
2019/02/05 NodeJs
vue中 this.$set的用法详解
2019/09/06 Javascript
Python中__call__用法实例
2014/08/29 Python
Django发送html邮件的方法
2015/05/26 Python
python跳过第一行快速读取文件内容的实例
2018/07/12 Python
python下载的库包存放路径
2020/07/27 Python
实现CSS3中的border-radius(边框圆角)示例代码
2013/07/19 HTML / CSS
HTML5的革新 结构之美
2011/06/20 HTML / CSS
HTML5 weui使用笔记
2019/11/21 HTML / CSS
Janie and Jack美国官网:GAP旗下的高档童装品牌
2019/09/09 全球购物
Opodo意大利:欧洲市场上领先的在线旅行社
2019/10/24 全球购物
介绍一下OSI七层模型
2012/07/03 面试题
大学生求职中的自我评价
2013/10/01 职场文书
小学生开学感言
2014/02/28 职场文书
2015年领班工作总结
2015/04/29 职场文书
Go并发4种方法简明讲解
2022/04/06 Golang
Redis数据同步之redis shake的实现方法
2022/04/21 Redis