主要是用到css的动画属性:animation , transform;vue的@mouseenter鼠标移入事件,@mouseleave鼠标移出事件。
上代码:
html:
<div class="list_box">
<div id="scroll_box" ref="scroll_box" class="list anim" @mouseenter="stopAn" @mouseleave="leaveAn">
<ul id="list1" ref="list1">
<li v-for="(item,i) in wranData" :key="i" :class="{bg:(i%2==0)?true:false}">
<template>
<span class="num">{{item.a}}</span>
<span class="num">{{item.b}}</span>
<span class="num">{{item.c}}</span>
<span class="num">{{item.d}}</span>
<span class="num">{{item.e}}</span>
</template>
</li>
</ul>
<!-注意这个ul就是上面ul的复制体哦,除了ref不一样,其他都跟上面一样哦-->
<ul ref="list2" >
<li v-for="(item,i) in wranData" :key="i" :class="{bg:(i%2==0)?true:false}">
<template>
<span class="num">{{item.a}}</span>
<span class="num">{{item.b}}</span>
<span class="num">{{item.c}}</span>
<span class="num">{{item.d}}</span>
<span class="num">{{item.e}}</span>
</template>
</li>
</ul>
</div>
</div>
css:
.list_box .anim:hover {
cursor: pointer;
}
.list_box .list {
height: 390px;
overflow: hidden;
}
.list_box .list ul {
padding: 0 5px;
}
.list_box .list ul li {
color: #43475F;
display: flex;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
overflow: hidden;
text-overflow: ellipsis;
word-break: keep-all;
white-space: nowrap;
border-top: 1px solid #E7EAEF;
padding: 12px 0;
}
.list_box .list ul li:hover {
background: rgba(126, 129, 147, 0.1);
}
.list_box .list ul li span {
margin-right: 5px;
}
.list_box .list ul li span:last-child {
margin-right: 0px;
}
.list_box .list ul .bg {
background-color: #fff;
}
@keyframes move {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(0, -100%);
}
}
因为数据需要从接口动态获取,需要在获取到数据后才能触发css动画,所以需要一丢丢的js代码:
getData() {
var that = this;
$.ajax({
url: '',
data: {},
type: "get",
success: function (result) {
if (result.code === 0) {
that.wranData = result.data;
//滚动动画时间设置
that.$nextTick(() => {
//获取数据展示高度和实际容器高度,判断数据是否超出容器盒子
that.scrollBoxHeight=document.querySelector('#scroll_box').clientHeight;
that.scrollBoxUlHeight=document.querySelector('#scroll_box #list1').clientHeight;
//当数据的2倍超过容器的高度,添加css动画;不满足时取消动画,并且隐藏list2容器
if (that.scrollBoxUlHeight> that.scrollBoxHeight) {
that.$refs.list1.style.animation = `${that.wranData.length}s move infinite linear`
that.$refs.list2.style.animation = `${that.wranData.length}s move infinite linear`
}else{
that.$refs.list1.style.animation='none'
that.$refs.list2.style.animation='none'
that.$refs.list2.style.display='none'
}
})
}
},
})
},
鼠标移入暂停动画,鼠标移出继续动画:
// 移出接着动画
leaveAn() {
this.$refs.list1.style.animationPlayState = "running";
this.$refs.list2.style.animationPlayState = "running";
},
// 移入暂停动画
stopAn() {
this.$refs.list1.style.animationPlayState = "paused";
this.$refs.list2.style.animationPlayState = "paused";
},