文字轮播+淡入淡出效果

需求描述：

将列表中的数据循环展示，每间隔指定时间显示一行，且每次需要以淡入淡出形式变化。

实现效果：

实现思路：

淡入淡出效果使用<transition>标签实现，<transition> 中间需要包住有v-if或v-show的div </transition>

<template>
  <div class="index-content">
    <div class="title">
      <div v-if="flag" >
          {{titleList[0]}}
      </div>
      <transition name="test">
        <div v-if="titleShow" :key="1">
          <ul v-for="(item,index) in titleList" :key="index" >
            <li :id="index" v-show="index==n">
              {{item}}
            </li>
          </ul>
        </div>
      </transition>
    </div>
  </div>
</template>
<script>
export default ({
  name: 'List',
  props: [],
  data(){
    return{
      flag:true,
      titleShow:false,
      titleList:[
        '学员利益至上   一切为学员服务',
        '自由选择 改变未来',
        '爱国敬业 我的责任 诚实做人 认真做事',
        '建立完善的终身教育体系和完全教育体系',
        '创新　进取　激情　拼搏',
        ],
      n:1
    }
  },
  methods: {
    Show(){
        this.titleShow = !this.titleShow
      },
    play(){
      this.n++;
      //页面刚渲染完成时，flag 为true，文字未显示时为防止div高度变化，占位使用
      this.flag = false
      this.Show()
      if(this.n == this.titleList.length){
          this.n = 0
      }
    }
  },
  created(){
    //每三秒（3000 毫秒）执行一次play()方法
    setInterval(this.play,3000)
  },
  watch:{
  }
})
</script>
<style lang="scss" scoped>
.test-enter{
  opacity: 0.3;
}
.test-leave-to{
  opacity: 0;
}
.test-enter-to,.test-leave{
  opacity: 1;
}
.test-leave-active{
  transition: all 8s;
}
.test-enter-active{
  transition: all 5s;
}
</style>