css实现滚屏展示效果

我这里是20条数据循环展示，页面同时能展示四条数据，一次循环20s

实现无缝滑动需要把前四条数据加到最后，否则会出现数据瞬变（因为循环结束会瞬间拉回，原来位置重新向下滑动），也就是有24条数据

不说废话，直接上代码

实现滑动功能的主要代码

@keyframes myMove {
	  0% {
	    transform: translateY(0);
	  }
	  100% {
	    transform: translateY(-500%);//我是按百分比设定高度，所以下滑的距离是5*height
	  }
	}

animation: myMove 20s linear infinite;
		animation-fill-mode: forwards;

 

 

整个组件代码

<template>
	<div style="width: 100%;height: 100%;">
		<div class="title">
			<div class="list-title">地区</div>
			<div class="list-title">用户名</div>
			<div class="list-title">回收物</div>
			<div class="list-title">回收量</div>
			<div class="list-title">时间</div>
		</div>
		<div class="infos" >	
				<ul id="scroll-data">	
					<!-- <li class="info">
							<div class="list-info">小区</div>
							<div class="list-info">小区</div>
							<div class="list-info">小区</div>
							<div class="list-info">小区</div>
							<div class="list-info">小区1</div>
					</li> -->
		
				</ul>
				
		</div>
	</div>
</template>

<script>
	export default {
		name: 'scroll',
		props:['scrolldata'],
		data() {
			return {
				

			}
		},
		methods: {
			
		},
		watch:{
			scrolldata(newval,oldval){
				var cent = document.getElementById("scroll-data");
				cent.innerHTML=''
				if(newval.length!==0){
					for(var i = 0; i < newval.length; i++) {
						cent.innerHTML += "<li class='info'>"+ 
									"<div  class='list-info'>" + newval[i].comminName + "</div>"+
									"<div class='list-info'>" + newval[i].userName + "</div>" +
									"<div class='list-info'>" + newval[i].garbageTypeName + "</div>" +
									"<div class='list-info'>" + newval[i].garbageNumber + "</div>" +
									"<div class='list-info'>" + newval[i].recycleTime + "</div>" +
									"</li>";
					}
					for(var i = 0; i < 4; i++) {
						cent.innerHTML += "<li class='info'>"+ 
									"<div  class='list-info'>" + newval[i].comminName + "</div>"+
									"<div class='list-info'>" + newval[i].userName + "</div>" +
									"<div class='list-info'>" + newval[i].garbageTypeName + "</div>" +
									"<div class='list-info'>" + newval[i].garbageNumber + "</div>" +
									"<div class='list-info'>" + newval[i].recycleTime + "</div>" +
									"</li>";
					}
				}
			}
		}
	}
</script>

<style>
	.title{
		width: 100%;
		height: 20%;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
	}
	.list-title{
		width:20%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 20px;
		font-weight: 700;
		color: #FFFFFF;
	}
	.infos{
		width: 100%;
		height: 80%;
		overflow: hidden;
		text-align: center;
	}
	
	@keyframes myMove {
	  0% {
	    transform: translateY(0);
	  }
	  100% {
	    transform: translateY(-500%);
	  }
	}
	
	.infos>ul{
		animation: myMove 20s linear infinite;
		animation-fill-mode: forwards;
		width: 100%;
		height: 100%;
		list-style: none;
		padding: 0;
		margin: 0;
	}
	.infos>ul>li{
		width: 100%;
		height: 25%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}
	
	.list-info{
		width:20%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>