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 相关文章推荐
js中事件的处理与浏览器对象示例介绍
Nov 29 Javascript
node.js中的socket.io入门实例
Apr 26 Javascript
Javascript图片上传前的本地预览实例
Jun 16 Javascript
jQuery中:file选择器用法实例
Jan 04 Javascript
js全选实现和判断是否有复选框选中的方法
Feb 17 Javascript
JavaScript中的Math.atan2()方法使用详解
Jun 15 Javascript
js+css实现的圆角边框TAB选项卡滑动门代码分享(2款)
Aug 26 Javascript
JavaScript对HTML DOM使用EventListener进行操作
Oct 21 Javascript
全面解析jQuery $(document).ready()和JavaScript onload事件
Jun 08 Javascript
使用smartupload组件实现jsp+jdbc上传下载文件实例解析
Jan 05 Javascript
浅谈PDF.js使用心得
Jun 07 Javascript
浅谈layui框架自带分页和表格重载的接口解析问题
Sep 11 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
PHP文本数据库的搜索方法
2006/10/09 PHP
PHP中for循环语句的几种变型
2006/11/26 PHP
PHP6 mysql连接方式说明
2009/02/09 PHP
php插入排序法实现数组排序实例
2015/02/16 PHP
php中PDO方式实现数据库的增删改查
2015/05/17 PHP
学习php设计模式 php实现抽象工厂模式
2015/12/07 PHP
PHP统计目录中文件以及目录中目录大小的方法
2016/01/09 PHP
PHP模糊查询的实现方法(推荐)
2016/09/06 PHP
PHP实现的简单路由和类自动加载功能
2018/03/13 PHP
让FireFox支持innerText的实现代码
2009/12/01 Javascript
jQuery插件实现屏蔽单个元素使用户无法点击
2013/04/12 Javascript
js实现瀑布流的一种简单方法实例分享
2013/11/04 Javascript
jquery实现input输入框实时输入触发事件代码
2014/01/28 Javascript
JS中数组Array的用法示例介绍
2014/02/20 Javascript
jQuery实现点击图片翻页展示效果的方法
2015/02/16 Javascript
Javascript实现汉字和拼音互转的终极方案
2016/10/19 Javascript
JavaScript函数表达式详解及实例
2017/05/05 Javascript
微信小程序搭建(mpvue+mpvue-weui+fly.js)的详细步骤
2018/09/18 Javascript
vue实现页面滚动到底部刷新
2019/08/16 Javascript
vue的webcamjs集成方式
2020/11/16 Javascript
python获取外网ip地址的方法总结
2015/07/02 Python
Python实现抓取网页生成Excel文件的方法示例
2017/08/05 Python
对python抓取需要登录网站数据的方法详解
2018/05/21 Python
Python‘==‘ 及 ‘is‘相关原理解析
2020/09/05 Python
网页布局中CSS样式无效的十个重要原因详解
2017/08/10 HTML / CSS
Data URI scheme详解和使用实例及图片base64编码实现方法
2014/05/08 HTML / CSS
Ben Sherman官方网站:英国男装品牌
2019/10/22 全球购物
宿舍卫生检讨书
2014/01/16 职场文书
食品销售计划书
2014/04/26 职场文书
乡镇干部个人对照检查材料(群众路线)
2014/09/26 职场文书
党的群众路线批评与自我批评发言稿
2014/10/16 职场文书
2015年幼儿园个人工作总结
2015/04/25 职场文书
安全教育培训制度
2015/08/06 职场文书
《围炉夜话》110句人生箴言,精辟有内涵,引人深思
2019/10/23 职场文书
Nginx+SpringBoot实现负载均衡的示例
2021/03/31 Servers
MySQL主从搭建(多主一从)的实现思路与步骤
2021/05/13 MySQL