H5W3
当前位置:H5W3 > JavaScript > 正文

【JS】动态设置keyframes实现列表向上滚动动画

1、html部分

<div class="xsck-list">
<div :key="item.id" class="xsck-list__li" v-for="(item, index) in orderList">
<div class="xsck-list__left">
{{item.biOrgsName}}
</div>
<div class="xsck-list__right">
{{item.taxAllAmount}}
</div>
</div>
</div>

2、js部分

// 动态设置keyframes实现向上滚动
// keyName动画名称,el执行动画的元素, time动画执行时间
setKeyframes(keyName, el, time = 1000) {
// 因为元素列表需要重复一份,所以移动的高度是元素高度的一半
const transformHeight = el.offsetHeight / 2;
const keyframes = `@keyframes ${keyName}{
0% {
transform: translateY(0);
}
100% {
transform: translateY(-${transformHeight}px);
}
}`;
const style = document.createElement('style');
style.type = 'text/css';
// 将 keyframes样式写入style内
style.innerHTML = keyframes;
// 将style样式存放到head标签
document.getElementsByTagName('head')[0].appendChild(style);
// 为需要设置滚动动画的元素设置动画值
el.setAttribute(
'style',
// animation-fill-mode: forwards 将动画重置为第一帧,实现无缝的播放了
`animation:${keyName} ${time}s linear infinite;animation-fill-mode: forwards`,
);
},

3、调用

// 为实现动画无缝播放,列表元素的值应是[1,2,3,1,2,3]这样的形式,这样才能让123循环无缝播放
this.orderList = this.xsckRankList.concat(this.xsckRankList);
const el = document.querySelector('.xsck-list');
this.setKeyframes('myNove', el);

4、参考
(1) https://www.jianshu.com/p/b7b…
(2) https://blog.csdn.net/qq_4180…
(3) https://developer.mozilla.org…
(4) https://developer.mozilla.org…

本文地址:H5W3 » 【JS】动态设置keyframes实现列表向上滚动动画

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址