南京市微信小程序制作_vuejs 制造布景淡入淡出切换动画的实例

vuejs 制作背景淡入淡出切换动画的实例       今天小编就为大家分享一篇vuejs 制作背景淡入淡出切换动画的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
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 ponent only -- style scoped 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; 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;

碰到的问题

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的手册的,这里是关于过度效果的所有方面的东西。感觉能省很多代码。

 div 
 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 

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 制作背景淡入淡出切换动画的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持凡科。


相关阅读