<template>
<div class="box">
<div class="item" :class="{'current': index === 0, 'to-big': toBig && index === 1, 'running': running}" v-for="item,index in swiper" :key="index">
{{item}}
</div>
</div>
</template>
<script>
// 整体思路
// 每次只显示两条数据,循环从总的数据列表中取
export default {
props: {
// 轮播数据
list: {
type: Array,
required: true,
default: () => {
return [1,2,3,4,5,6]
}
},
// 默认显示两行
defaultShowData: {
type: Array,
required: true,
default: () => {
return [1,2]
}
}
},
data() {
return {
swiper: this.defaultShowData,
index: 1,
running: false,
toBig: false
}
},
mounted() {
setInterval(() => {
this.toBig = true
if (this.index + 1 >= this.list.length) {
this.index = 0
} else {
this.index += 1
}
this.swiper.push(this.list[this.index])
this.running = true
let timer = setTimeout(() => {
this.swiper.shift()
clearTimeout(timer)
this.running = false
this.toBig = false
}, 400)
}, 3000)
}
}
</script>
<style scoped lang="scss">
.box {
height: 60px;
overflow: hidden;
}
// 每一行的样式
.item {
font-size: 16px;
opacity: 0.6;
line-height: 30px;
background-color: #fff;
}
// 文字向上滚动的动画
.running {
animation: fadeToTop .4s ease-in-out 0s infinite;
}
@keyframes fadeToTop {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-100%);
}
}
// 当前显示的数据样式
.current {
font-size: 20px;
opacity: 1;
font-weight: 700;
}
// 文字变大的动画
.to-big {
animation: toBig .4s ease-in-out 0s 1;
}
@keyframes toBig {
0% {
font-size: 16px;
opacity: .6;
font-weight: 500;
transform: translateY(0%);
}
25% {
opacity: .7;
}
50% {
opacity: .8;
}
75% {
opacity: .9;
}
100% {
font-size: 20px;
opacity: 1;
font-weight: 700;
transform: translateY(-100%);
}
}
</style>
文字向上滚动+动画
最新推荐文章于 2024-10-04 20:18:28 发布