节流阀解决JS动画抖动问题

双星。

已于 2022-03-10 15:31:07 修改

阅读量951

点赞数 2

分类专栏： Web前端文章标签：开发语言 javascript 前端 html5 css3

于 2022-03-10 15:29:11 首次发布

本文链接：https://blog.csdn.net/weixin_44703582/article/details/123397430

版权

在使用JS动画做一些练习的时候我发现在动画执行时间内快速移开鼠标时会出现动画因鼠标移动过快从而导致代码冲突让画面抖动的bug ，今天我们就来解决这个bug。

示例：

可以看到当鼠标慢慢移动时，动画正常执行出现和退回，但当在动画执行过程中快速移动鼠标后，画面会出现抖动的bug。

以下是效果图源代码：

<!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>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .boxx {
            position: absolute;
            top: 400px;
            left: -200px;
            width: 220px;
            height: 300px;

最低0.47元/天解锁文章

双星。

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
节流阀解决JS动画抖动问题

文章目录系列文章目录前言一、pandas是什么？二、使用步骤 1.引入库 2.读入数据总结在使用JS动画做一些练习的时候我发现在动画执行时间内快速移开鼠标时会出现动画因鼠标移动过快从而导致代码冲突让画面抖动的bug ，今天我们就来解决这个bug。示例：可以看到当鼠标慢慢移动时，动画正常执行出现和退回，但当在动画执行过程中快速移动鼠标后，画面会出现抖动的bug。以下是效果图源代码：<!DOCTYPE html>&lt...
复制链接

扫一扫