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 相关文章推荐
javascript数组使用调用方法汇总
Dec 08 Javascript
调试Node.JS的辅助工具(NodeWatcher)
Jan 04 Javascript
JS 去除Array中的null值示例代码
Nov 20 Javascript
优化RequireJS项目的相关技巧总结
Jul 01 Javascript
原生JavaScript制作微博发布面板效果
Mar 11 Javascript
表单中单选框添加选项和移除选项
Jul 04 Javascript
简单的js表格操作
Sep 24 Javascript
jquery实现下拉框多选方法介绍
Jan 03 Javascript
解决mpvue + vuex 开发微信小程序vuex辅助函数mapState、mapGetters不可用问题
Aug 03 Javascript
javascript导出csv文件(excel)的方法示例
Aug 25 Javascript
javascript实现点亮灯泡特效示例
Oct 15 Javascript
js实现蒙版效果
Jan 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中++i 与 i++ 的区别
2012/08/08 PHP
WordPress中设置Post Type自定义文章类型的实例教程
2016/05/10 PHP
PHP中Session ID的实现原理实例分析
2019/08/17 PHP
addRule在firefox下的兼容写法
2006/11/30 Javascript
javascript得到XML某节点的子节点个数的脚本
2008/10/11 Javascript
javascript 动态调整图片尺寸实现代码
2009/12/28 Javascript
让你的博文自动带上缩址的实现代码,方便发到微博客上
2010/12/28 Javascript
js控制的回到页面顶端goTop的代码实现
2013/03/20 Javascript
js字符串完全替换函数分享
2014/12/03 Javascript
JQuery球队选择实例
2015/05/18 Javascript
基于百度地图实现产品销售的单位位置查看功能设计与实现
2016/10/21 Javascript
Javascript中call,apply,bind方法的详解与总结
2016/12/12 Javascript
angular实现商品筛选功能
2017/02/01 Javascript
JS排序之冒泡排序详解
2017/04/08 Javascript
微信小程序request出现400的问题解决办法
2017/05/23 Javascript
iscroll实现下拉刷新功能
2017/07/18 Javascript
JSON对象转化为字符串详解
2017/08/11 Javascript
JavaScript适配器模式详解
2017/10/19 Javascript
使用vux实现上拉刷新功能遇到的坑
2018/02/08 Javascript
Node.js+Express+Mysql 实现增删改查
2019/04/03 Javascript
JS面向对象编程——ES6 中class的继承用法详解
2020/03/03 Javascript
对于Python的Django框架部署的一些建议
2015/04/09 Python
python制作websocket服务器实例分享
2016/11/20 Python
Python爬虫框架scrapy实现downloader_middleware设置proxy代理功能示例
2018/08/04 Python
python: 自动安装缺失库文件的方法
2018/10/22 Python
使用python将时间转换为指定的格式方法
2018/11/12 Python
详解pandas安装若干异常及解决方案总结
2019/01/10 Python
Python之pymysql的使用小结
2019/07/01 Python
python GUI库图形界面开发之PyQt5控件QTableWidget详细使用方法与属性
2020/02/25 Python
党支部承诺书范文
2014/03/28 职场文书
留学推荐信英文范文
2015/03/26 职场文书
汶川大地震感悟
2015/08/10 职场文书
超市主管竞聘书
2015/09/15 职场文书
Python Pandas pandas.read_sql函数实例用法
2021/06/21 Python
SQL Server内存机制浅探
2022/04/06 SQL Server
ssh服务器拒绝了密码 请再试一次已解决(亲测有效)
2022/08/14 Servers