文字轮播+淡入淡出效果

需求描述:

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

实现效果:

实现思路:

淡入淡出效果使用<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>

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值