如何解决css动画抖动的问题

今天接到一个需求是这样的，我们有一个表格，表头固定，表格的宽高是可以通过拖拽调整的，当表格内容的高度大于表格设置的高度时，表格中的内容自动向上滚动；

但是之前的实现是当表格中的数据滚动到最后一行的时候就停下来了，现在要重新写动画，让表格中的数据循环滚动。

感觉好像并不复杂，毕竟之前的其他业务逻辑都需要动，只需要把动画重写一下就好了，说干就干！

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><div class="content"><div class="table-head"><table><thead><tr><th>The table header</th></tr></thead></table></div><div class="table-body-wrap"><table class="table-body"><tbody><tr><td class="serial">1</td><td>with two columns</td><td>The table</td><td>with two columns</td><td>The table</td><td>with two columns</td></tr>.....<tr><td class="serial">9</td><td>with two columns</td><td>The table</td><td>with two columns</td><td>The table</td><td>with two columns</td></tr></tbody></table></div></div><script>const tableBodyWrapHeight = document.getElementsByClassName('table-body-wrap')[0].clientHeightconst tableBody = document.getElementsByClassName('table-body')[0]const tableBodyHeight = tableBody.clientHeightlet diffHeight = 0if (tableBodyHeight > tableBodyWrapHeight) {diffHeight = tableBodyHeight - tableBodyWrapHeight}let timer = nullfunction tableBodyScroll() {if (timer) {clearInterval(timer)timer = null}if (diffHeight === 0) returnlet temp = 0timer = setInterval(() => {if (temp < -diffHeight) {temp = 0}temp--tableBody.style.transform = `translateY(${temp}px)`}, 20)}tableBodyScroll()</script></body>
</html>

思路大概就是我先获取到表格区内容区wrapper的高度和表格内容区的高度，将二者做对比。

如果是wrapper的高度大于表格内容区的高度，那我就什么也不做。

如果表格内容区的高度大于wrapper的高度，那我会得到一个高度差，这个高度差就是表格内容区要向上滚动的高度。
然后通过 setInterval ，不断改变表格内容区 transoform 的 translateY 来实现滚动的效果。

思路清晰，仿佛一点毛病都没有，写完之后来让我们看看效果！

嗯~~，perfect！诶！好像又感觉哪里怪怪的……

经过一番冷静、深入、仔细入微的观察。

我发现！这个动画咋感觉有点抖呢？

这……

功能已经实现了，要不算了吧，去愉快的摸鱼~

（摸鱼亿分钟后……，问题一直在心里，有点膈应

如何解决css动画抖动的问题相关推荐

节流阀解决JS动画抖动问题
在使用JS动画做一些练习的时候我发现在动画执行时间内快速移开鼠标时会出现动画因鼠标移动过快从而导致代码冲突让画面抖动的bug ,今天我们就来解决这个bug. 示例: 可以看到当鼠标慢慢移动时,动画正常 ...
animate.css动画抖动,Animate.css抖动效果每次都不工作
我正在制作一个Twitch Streamer应用程序,该应用程序使用Twitch API为一组预定义的拖放器提取一些数据.Animate.css抖动效果每次都不工作我有三个按钮来选择所有/在线/离线 ...
css 动画抖动,css3实现循环抖动等动画
CSS3抖动 /*实现图片旋转,当鼠标移动上去就停止*/ /*实现的是过渡*/img:hover{width:1000px; /*开始之前等待两秒*/transition:width 10s line ...
CSS动画效果的回调
用纯JS实现动画效果代码量大,计算复杂.因此现在前端页面的动画效果一般都采用CSS来实现. CSS动画实现简单高效,但是在处理动画,控制动画过程上却缺少一些有效手段. 例如我们想在动画效果完成时调用回 ...
vue图片动画上下跳动_Vue 解决路由过渡动画抖动问题(实例详解)
前言 Vue-Router 作为 Vue 的核心模块,它为我们提供了基于组件的路由配置.路由参数等功能,让单页面应用变得更易于管理.良好的路由管理尤为重要,比如路由拦截.路由懒加载.路由权限等都在开发 ...
解决CSS position:fixed 抖动问题
解决CSS position:fixed 抖动问题参考文章: (1)解决CSS position:fixed 抖动问题 (2)https://www.cnblogs.com/arlar/p/5660 ...
html鼠标在ie上抖动,IE下CSS3动画抖动
问题记录:IE11中执行淡入动画时出现抖动效果,效果如下: 抖动.gif 解决此问题需理解一些概念: 重排:重新生成布局重绘:重新绘制注意:重排必定导致重绘,重绘不一定需要重排:比如改变背景色,就 ...
[京东实践干货]手把手教你实现「京喜工厂」的CSS动画效果
0 契机与背景今年Q1(2020年第一季度)参与了京喜事业部「京喜工厂」业务的前端开发.用户可以通过「京喜工厂」参与口罩.抽纸.大米等商品的"在线生产",既能趣味造物,又能免费领 ...
css动画和js动画_CSS与JS动画：哪个更快？
css动画和js动画 How is it possible that JavaScript-based animation has secretly always been as fast - or ...

如何解决css动画抖动的问题

如何解决css动画抖动的问题相关推荐

最新文章

热门文章