需求描述:
将列表中的数据循环展示,每间隔指定时间显示一行,且每次需要以淡入淡出形式变化。
实现效果:
实现思路:
淡入淡出效果使用<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>