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

搜集素材中...

1. 轮播图制做
2. 使用Banner制做轮播图
3. 小程序轮播图 swiper 使用
4. 微信小程序制作轮播图
5. 制作JavaSript小轮播
6. 利用vueJs实现图片轮播
7. 小议Bootstrap轮播图
8. 小米官网轮播图
9. 小程序轮播图
10. 小程序--轮播图
更多相关文章...
• MySQL FLOAT、DOUBLE、DECIMAL（小数类型） - MySQL教程
• ASP 引用文件 - ASP 教程
• Composer 安装与使用
• 使用Rxjava计算圆周率