Shulou(Shulou.com)05/31 Report--

This article introduces the relevant knowledge of "how to make vuejs background fade in and out switch animation". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

After installing vuejs, add Background.vue to components

The code is as follows

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;}});}} .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;}

The json data of the picture are as follows

[{"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"}]

If the routing doesn't work, take a look at the information on the Internet.

The problems encountered

1. In vue, if you want the function to run directly when the page is loaded, put the function in the mounted object.

two。 Functions are placed in methods

Vue-resource usage / / used to obtain json data this.$http.get (url). Then (response = > {console.log (response.body);}, response = > {console.log (response.body);});}

4. When using vue-resource, you need to use the

Import VueResource from 'vue-resource'Vue.use (VueResource)

Write it in main.js.

In the 5.mounted function, you need to put the running function in the

This.$nextTick (function () {.})

Medium

6. Using velocity-animate in vue

Npm install velocity-animate-- save-dev

Add to main.js

Import Velocity from 'velocity-animate'

7. Excessive effect of multi-picture cycle

It has been studied here for a long time, and after the page goes in, it will run directly from the leave function, not from beforeEnter as expected. Finally figured out why, change show: true to show: false, you can let the page start in front of beforeEnter.

This is based on the manual of vuejs, and http://cn.vuejs.org/v2/guide/transitions.html here is about all aspects of excessive effects. It feels like it can save a lot of code.

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;}});} "how to make background fade in and out switch animation" is introduced here, thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.