vue 实现轮播

原理：使用vue的transition标签实现动画效果；

           使用定时器实现自动播放（轮播）；

           使用生命周期（钩子函数）实现载入时自动播放

踩坑：1、transition只对单个元素有用，transition-group也只对子代元素直接起作用；

           2、渲染时使用v-if，若用v-show会出现首个位置不统一（可以添加相对定位矫正）；

           3、方法move和auto虽然一样也要分开，否则会出现混乱；

           4、定时器的回调函数在调用方法时，千万不要加“()"，否则定时器无效（特别注意）

代码如下：

<template>
  <!--轮播-->
  <div class="hello">
    <ul @mouseover="stop" @mouseout="move">
      <transition-group name="master" tag="ul">
      <li v-for="(mj,index) in mjs" :key="index" v-if="show===index">
          <div >{{mj}}</div>
      </li>
      </transition-group>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      timer:null,
      show:0,
      mjs: [
        '东风一张',
        '红中',
        '南风，碰',
        '杠一下'
      ]
    }
    },
  methods: {
    play:function () {
      if (this.show === this.mjs.length - 1) {
        this.show = 0
      }
      else {
        this.show++
      }
    },
    auto:function () {
      this.timer=setInterval(this.play,2000)
    },
    stop:function () {
      clearInterval(this.timer)
    },
    move:function () {
      this.timer=setInterval(this.play,2000)
    }
    },
​​​// 钩子函数
  created:function () {
    this.auto()
  }
}
</script>

<!--动画样式-->
<style scoped>
  li{list-style-type: none}
  .master-enter-active,.master-leave-active{
    transition:all 1s;
  }
  .master-enter,.master-leave-to{
    opacity: 0;
    transform: translateX(30px)
  }
</style>