[vuejs短文]使用vue-transition制作小小轮播图

提示

本文是个人的一点小笔记,用来记录开发中遇到的轮播图问题和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>

[vuejs短文]使用vue-transition制作小小轮播图

提示

开始制作

超简易呼吸轮播

双翼渐变式轮播

搜集素材中...

比那名居天子

引用和评论

[phaser3学习]使用phaser3做一款飞刀小游戏

腾讯新闻中心首页改版啦

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

开发插件集合

JS校验身份证号