vue怎么實現背景淡入淡出切換動畫

這篇文章主要介紹“vue怎么實現背景淡入淡出切換動畫”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“vue怎么實現背景淡入淡出切換動畫”文章能幫助大家解決問題。

安裝好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前開始。

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

vue是什么

Vue是一套用于構建用戶界面的漸進式JavaScript框架，Vue與其它大型框架的區別是，使用Vue可以自底向上逐層應用，其核心庫只關注視圖層，方便與第三方庫和項目整合，且使用Vue可以采用單文件組件和Vue生態系統支持的庫開發復雜的單頁應用。

關于“vue怎么實現背景淡入淡出切換動畫”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。