需求:
在Vue项目的顶部,来实现数据上下翻页+停顿滚动
代码:
html中写的
<el-row :gutter="22">
<el-col :xs="24" :sm="24" :lg="24">
<!-- 头部滚动区域 -->
<div class="text-container">
<div class="text-container" v-if="showTopSlide">
<transition class="inner-container2" name="slide" mode="out-in">
<li :key="text.val.id">
<router-link to="/notice">
<span class="roll-id">序号:{{ text.val.id }}</span>
<span class="roll-text"
>发布时间: {{ text.val.dbtime }}</span
>
<span class="roll-text"
>来源: {{ text.val.source }}</span
>
<span class="roll-text">类型: {{ text.val.type }}</span>
</router-link>
</li>
</transition>
</div>
</div>
</el-col>
</el-row>
JS中写的:
<script>
const totalDuration = 4000;
export default {
mounted() {
this.startMove();
},
computed: {
text() {
return {
id: this.number,
val: this.realList[this.number]
};
}
},
methode:{
startMove() {
let timer = setTimeout(() => {;
if (this.number === this.realList.length) {
this.number = 0;
} else {
this.number += 1;
}
this.startMove();
}, totalDuration);
}
}
}
</script>
css:
<style>
.text-container {
width: 100%;
height: 50px;
line-height: 10px;
margin: 10px auto;
border-radius: 10px;
background-color: #fff;
overflow: hidden;
}
.inner-container {
animation: myMove 5s linear infinite;
animation-fill-mode: forwards;
}
@keyframes myMove2 {
0% {
transform: translateY(0);
}
10% {
transform: translateY(-30px);
}
20% {
transform: translateY(-30px);
}
30% {
transform: translateY(-60px);
}
40% {
transform: translateY(-60px);
}
50% {
transform: translateY(-90px);
}
60% {
transform: translateY(-90px);
}
70% {
transform: translateY(-120px);
}
80% {
transform: translateY(-120px);
}
90% {
transform: translateY(-150px);
}
100% {
transform: translateY(-150px);
}
}
.slide-enter-active,
.slide-leave-active {
transition: all 0.5s linear;
}
.slide-leave-to {
transform: translateY(-20px);
}
.slide-enter {
transform: translateY(20px);
}
</style>
|