机场信息无缝轮播悬停组件

<template>
	<!-- 文字轮播效果 -->

	<div class="scroll">
	<div>
		
	</div>
		<div class="ele" :class="this.dataList.length > 2 ? 'first-marquee scroll-box' : 'scroll-box'" v-if="dataList.length"
			:style="{
			animation: `first-marquee  ${this.dataList.length}s linear infinite normal`,
		  }">
			<div class="behaviorLeft"  v-for="item in dataList">
				{{ item.violationTypeName }}: {{ item.violationNums || 0 }}人
			</div>
		</div>
		<div class="scroll-box" v-if="this.dataList.length > 2"
						:style="{
			animation: `first-marquee  ${this.dataList.length}s linear infinite normal`,
		  }">
						<div class="behaviorLeft"  v-for="item in dataList">
				{{ item.violationTypeName }}: {{ item.violationNums || 0 }}人
			</div>
					</div>
	</div>

</template>
<script>
export default {
	name: "cus-carousel",
	props: {
		dataList: {
			type: Array,
			default: () => []
		}
	},
	watch: {
		dataList() {
			console.log('改变了',this.dataList.length);
			let length = Math.ceil(this.dataList.length / 2)
			console.log(length);
		let animation = ''
		let int = 0
		 for(let i = 0;i < length * 2 + 1;i++) {
			
            animation = animation + `${i * (100 / (length*2))}% {
		transform: translateY(${int}%);
	}`
	      int = i % 2 === 0 ? int - (100 / length) : int
		 }
		 console.log(animation);
		 
			document.styleSheets[0].insertRule(
			
	`@keyframes first-marquee {
		${animation} }`,
	0
);
		}
	},
	mounted() {
		console.log(document.styleSheets[0]);
		

	},
	data() {
		return {
          
		};
	}
}
</script>
<style lang="css">
/* 定义第一个span的animation：时长 动画名字 匀速 循环 正常播放 */

</style>
<style lang="scss">


@keyframes second-marquee {
	0% {
		transform: translateY(0);
	}
	30%{
		transform: translateY(-50%);
	}
	50%{
		transform: translateY(-50%);
	}
	70%{
		transform: translateY(-100%);
	}
	/* 向上移动 */
	100% {
		transform: translateY(-100%);
	}
}
.behaviorLeft {
	width: 50%;
}
.scroll {
	overflow: hidden;
	height: 20px;
	width: 100%;
	color: white;
	&-box {	
		display: flex;
		flex-wrap: wrap;
		width: 100%;
    //    height: 100%;
		// animation: scroll 20s  linear infinite;
		// position: relative;
	}

}

</style>