requestAnimationFrame 兼容方案

gaosboy 发布于2019-08-26 13:28 / 1929人阅读

摘要：编写涉及在线演示代码代码代码必须先清除，否者多次点击会生成多个动画帧，导致元素移动速度加快若有疑问或错误，请留言，谢谢

[toc]

编写涉及：css, html, js

在线演示codepen

html代码


    move

css代码

.roll-box {
    position: relative;
    width: 600px;
    height: 400px;
    background: #007acc;
    overflow: hidden;
    color: #fff;
}
.inner-box {
    position: absolute;
    top: 10px;
    left: 0;
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    background-color: rgb(245, 152, 30);
}
button{
    margin-top: 20px;
    padding: 6px 10px;
    border: 0;
    color: #fff;
    background-color: rgb(39, 133, 240);
}

JavaScript代码

let moveCount = 0;
let rafId = "";
const ele = document.querySelector(".inner-box");

window.requestAniFrame = (function () {
    return window.requestAnimationFrame

        // Older versions Chrome/Webkit
        window.webkitRequestAnimationFrame ||

        // Firefox < 23
        window.mozRequestAnimationFrame ||

        // opera
        window.oRequestAnimationFrame ||

        // ie
        window.msRequestAnimationFrame ||

        function (callback) {
            return window.setTimeout(callback, 1000 / 60);
        };
})()

window.cancelAnimation = (function () {
    return window.cancelAnimationFrame || window.mozCancelAnimationFrame || window.cancelRequestAnimationFrame || function (id) { clearTimeout(id) }
})()

function moveFn() {
    ele.setAttribute("style", "left:" + moveCount + "px");
    moveCount++

    if (moveCount > 550) {
        window.cancelAnimation(rafId)
    } else {
        rafId = window.requestAniFrame(moveFn)
    }
}

function startMove() {
    // 必须先清除，否者多次点击会生成多个动画帧，导致元素移动速度加快
    window.cancelAnimation(rafId)
    rafId = window.requestAniFrame(moveFn)
}

若有疑问或错误，请留言，谢谢！Github blog issues

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108862.html

Vue 兼容 ie9 的全面解决方案

摘要：本文将针对使用生态开发完成的网站，以版本为基础兼容目标，实现全功能正常使用的全面兼容解决方案。这样做的目的，是逐步减少全局性方法，使得语言逐步模块化。此外，使用这个，一旦页面不处于浏览器的当前标签，就会自动停止刷新。前言背景情况 vue - 2.5.11 vue-cli 使用模板 webpack-simple http请求：axios Vue 官方对于 ie 浏览器版本兼容情...

codeKK 2019-08-22 18:07 评论0 收藏0
requestAnimationFrame 兼容方案

摘要：编写涉及在线演示代码代码代码必须先清除，否者多次点击会生成多个动画帧，导致元素移动速度加快若有疑问或错误，请留言，谢谢 [toc] 编写涉及：css, html, js 在线演示codepen html代码 move start move css代码 .roll-box { position: relative; width: 600px; he...

Cc_2011 2019-08-23 14:51 评论0 收藏0
三种方式实现平滑滚动页面到顶部的功能

摘要：背景最近开发公司的公众号，做了一个点击滚动到顶部的功能。但是作为一个攻城狮，怎么可能对自己要求这么低，所以我给自己加了个需求，实现平滑滚动页面到顶部的功能。使用我们都知道，通过传入文档中的，轴坐标来实现滚动到页面某个位置的功能。背景最近开发公司的公众号H5，做了一个点击icon滚动到顶部的功能。实现功能比较简单，直接调用window.scrollTo(0, 0)，一行代码完成。但是...

amuqiao 2019-08-23 17:04 评论0 收藏0
三种方式实现平滑滚动页面到顶部的功能

摘要：背景最近开发公司的公众号，做了一个点击滚动到顶部的功能。但是作为一个攻城狮，怎么可能对自己要求这么低，所以我给自己加了个需求，实现平滑滚动页面到顶部的功能。使用我们都知道，通过传入文档中的，轴坐标来实现滚动到页面某个位置的功能。背景最近开发公司的公众号H5，做了一个点击icon滚动到顶部的功能。实现功能比较简单，直接调用window.scrollTo(0, 0)，一行代码完成。但是...

seanlook 2019-08-29 18:42 评论0 收藏0
requestAnimationFrame Web中写动画的另一种选择

摘要：现在又多了一种实现动画的方案，那就是还在草案当中的方法。这个方法就是传递给的回调函数。为回调函数一个简单的例子模拟一个进度条动画，初始宽度为在函数中将进度加然后再更新到宽度上，在进度达到之前，一直重复这一过程。 HTML5/CSS3时代，我们要在web里做动画选择其实已经很多了: 你可以用CSS3的animattion+keyframes; 你也可以用css3的transition...

Prasanta 2019-08-19 14:48 评论0 收藏0