[vuejs短文]使用vue-transition製做小小輪播圖

時間 2019-12-05

標籤 vuejs 短文使用 vue transition 製做小小简体版

原文原文鏈接

提示

本文是我的的一點小筆記,用來記錄開發中遇到的輪播圖問題和vue-transition問題.
會不斷學習各類輪播圖添加到本文當中
也有可能會上線,方便看效果

開始製做

超簡易呼吸輪播

簡單粗暴的使用vue transition製做的輪播圖,這裏解釋一下原理

動畫效果就像車輛穿行隧道,定好初始位置/最終位置,設定好運動規則,它就自動開了.
在下面的實例中,咱們設定好了運行規則,和分別兩種狀態,它就開始自動運行了.
你們能夠對照上圖看一下,很容易的,圖中的v表明transition標籤中的name字段html

<!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,從而展示不一樣的動畫效果vue

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