[vuejs短文]使用vue-transition製作小小輪播圖
阿新 • • 發佈：2018-11-06
提示
本文是個人的一點小筆記,用來記錄開發中遇到的輪播圖問題和vue-transition問題.
會不斷學習各種輪播圖新增到本文當中
也有可能會上線,方便看效果
開始製作
超簡易呼吸輪播
簡單粗暴的使用vue transition製作的輪播圖,這裡解釋一下原理
動畫效果就像車輛穿行隧道,定好初始位置/最終位置,設定好運動規則,它就自動開了.
在下面的例項中,我們設定好了執行規則,和分別兩種狀態,它就開始自動運行了.
大家可以對照上圖看一下,很容易的,圖中的v代表transition標籤中的name欄位
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="vue.js"></script> <style> html,body,#app{ width : 100%; height : 100% } .carousel-place{ position : relative; width: 50%; height : 500px; margin : 0 auto; } .carousel-place img{ width: 100%; height: 100%; position : absolute } /* 第一組:帶漸變效果 */ .fade-enter-active{ transition : all .5s ease } .fade-leave-active{ transition : all .5s ease } .fade-enter{ opacity : 0 } .fade-leave-to{ opacity : 0 } </style> </head> <body> <div id="app"> <button @click = "prevImage">上一張</button> <button @click = "nextImage">下一張</button> <div class="carousel-place"> <transition name = "fade"> <img :src="path" v-for = "(path,index) in imagePlaces" v-if = "index == currentIndex" :key = "'image'+index"> </transition> </div> </div> <script> let vm = new Vue({ el : "#app", data : { imagePlaces : [ "./img/1.jpg", "./img/2.jpg", "./img/3.jpg", "./img/4.jpg", "./img/5.jpg" ], currentIndex : 0, slideName : "fade-slide" }, methods : { prevImage : function(){ if(this.currentIndex > 0){ this.currentIndex-- this.slideName = "fade-rslide" } }, nextImage : function(){ if(this.currentIndex < this.imagePlaces.length-1){ this.currentIndex++ this.slideName = "fade-slide" } } } }) </script> </body> </html>
雙翼漸變式輪播
在這個輪播圖裡,我們transition的標籤是動態的,在翻頁函式執行的時候,會改變它的name,從而展現不同的動畫效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="vue.js"></script> <style> html,body,#app{ width : 100%; height : 100% } .carousel-place{ position : relative; width: 50%; height : 500px; margin : 0 auto; } .carousel-place img{ width: 100%; height: 100%; position : absolute } /* 第一組:帶漸變效果 */ .fade-enter-active{ transition : all .5s ease } .fade-leave-active{ transition : all .5s ease } .fade-enter{ opacity : 0 } .fade-leave-to{ opacity : 0 } /* 第二組:帶滑動效果 */ .fade-slide-enter-active{ transition : all .5s ease } .fade-slide-leave-active{ transition : all .5s ease } .fade-slide-enter{ opacity : 0; transform : translateX(-200px); } .fade-slide-leave-to{ opacity : 0; transform : translateX(200px); } /*第三組:雙翼滑動效果*/ .fade-rslide-enter-active{ transition : all .5s ease } .fade-rslide-leave-active{ transition : all .5s ease } .fade-rslide-enter{ opacity : 0; transform : translateX(200px); } .fade-rslide-leave-to{ opacity : 0; transform : translateX(-200px); } </style> </head> <body> <div id="app"> <button @click = "prevImage">上一張</button> <button @click = "nextImage">下一張</button> <div class="carousel-place"> <transition name = "fade"> <img :src="path" v-for = "(path,index) in imagePlaces" v-if = "index == currentIndex" :key = "'image'+index"> </transition> </div> <button @click = "prevImage">上一張</button> <button @click = "nextImage">下一張</button> <div class="carousel-place"> <transition name = "fade-slide"> <img :src="path" v-for = "(path,index) in imagePlaces" v-if = "index == currentIndex" :key = "'image-slide'+index"> </transition> </div> <button @click = "prevImage">上一張</button> <button @click = "nextImage">下一張</button> <div class="carousel-place"> <transition :name = "slideName"> <img :src="path" v-for = "(path,index) in imagePlaces" v-if = "index == currentIndex" :key = "'image-dbslide'+index"> </transition> </div> </div> <script> let vm = new Vue({ el : "#app", data : { imagePlaces : [ "./img/1.jpg", "./img/2.jpg", "./img/3.jpg", "./img/4.jpg", "./img/5.jpg" ], currentIndex : 0, slideName : "fade-slide" }, methods : { prevImage : function(){ if(this.currentIndex > 0){ this.currentIndex-- this.slideName = "fade-rslide" } }, nextImage : function(){ if(this.currentIndex < this.imagePlaces.length-1){ this.currentIndex++ this.slideName = "fade-slide" } } } }) </script> </body> </html>
蒐集素材中...
原文地址：https://segmentfault.com/a/1190000014089386