vuejs 制作背景淡入淡出切换动画

安装好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 中

1. 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>