requestAnimationFrame 兼容方案

gaosboy 發(fā)布于2019-08-26 13:28 / 2020人閱讀

摘要：編寫涉及在線演示代碼代碼代碼必須先清除，否者多次點(diǎn)擊會(huì)生成多個(gè)動(dòng)畫幀，導(dǎo)致元素移動(dòng)速度加快若有疑問或錯(cuò)誤，請(qǐng)留言，謝謝

[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() {
    // 必須先清除，否者多次點(diǎn)擊會(huì)生成多個(gè)動(dòng)畫幀，導(dǎo)致元素移動(dòng)速度加快
    window.cancelAnimation(rafId)
    rafId = window.requestAniFrame(moveFn)
}

若有疑問或錯(cuò)誤，請(qǐng)留言，謝謝！Github blog issues

GPU云服務(wù)器云服務(wù)器 requestAnimationFram 兼容模式不兼容js js兼容瀏覽器兼容全兼容

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/108862.html

相關(guān)文章

Vue 兼容 ie9 的全面解決方案

摘要：本文將針對(duì)使用生態(tài)開發(fā)完成的網(wǎng)站，以版本為基礎(chǔ)兼容目標(biāo)，實(shí)現(xiàn)全功能正常使用的全面兼容解決方案。這樣做的目的，是逐步減少全局性方法，使得語言逐步模塊化。此外，使用這個(gè)，一旦頁面不處于瀏覽器的當(dāng)前標(biāo)簽，就會(huì)自動(dòng)停止刷新。前言背景情況 vue - 2.5.11 vue-cli 使用模板 webpack-simple http請(qǐng)求：axios Vue 官方對(duì)于 ie 瀏覽器版本兼容情...

codeKK 2019-08-22 18:07 評(píng)論0 收藏0
requestAnimationFrame 兼容方案

摘要：編寫涉及在線演示代碼代碼代碼必須先清除，否者多次點(diǎn)擊會(huì)生成多個(gè)動(dòng)畫幀，導(dǎo)致元素移動(dòng)速度加快若有疑問或錯(cuò)誤，請(qǐng)留言，謝謝 [toc] 編寫涉及：css, html, js 在線演示codepen html代碼 move start move css代碼 .roll-box { position: relative; width: 600px; he...

Cc_2011 2019-08-23 14:51 評(píng)論0 收藏0
三種方式實(shí)現(xiàn)平滑滾動(dòng)頁面到頂部的功能

摘要：背景最近開發(fā)公司的公眾號(hào)，做了一個(gè)點(diǎn)擊滾動(dòng)到頂部的功能。但是作為一個(gè)攻城獅，怎么可能對(duì)自己要求這么低，所以我給自己加了個(gè)需求，實(shí)現(xiàn)平滑滾動(dòng)頁面到頂部的功能。使用我們都知道，通過傳入文檔中的，軸坐標(biāo)來實(shí)現(xiàn)滾動(dòng)到頁面某個(gè)位置的功能。背景最近開發(fā)公司的公眾號(hào)H5，做了一個(gè)點(diǎn)擊icon滾動(dòng)到頂部的功能。實(shí)現(xiàn)功能比較簡單，直接調(diào)用window.scrollTo(0, 0)，一行代碼完成。但是...

amuqiao 2019-08-23 17:04 評(píng)論0 收藏0
三種方式實(shí)現(xiàn)平滑滾動(dòng)頁面到頂部的功能

摘要：背景最近開發(fā)公司的公眾號(hào)，做了一個(gè)點(diǎn)擊滾動(dòng)到頂部的功能。但是作為一個(gè)攻城獅，怎么可能對(duì)自己要求這么低，所以我給自己加了個(gè)需求，實(shí)現(xiàn)平滑滾動(dòng)頁面到頂部的功能。使用我們都知道，通過傳入文檔中的，軸坐標(biāo)來實(shí)現(xiàn)滾動(dòng)到頁面某個(gè)位置的功能。背景最近開發(fā)公司的公眾號(hào)H5，做了一個(gè)點(diǎn)擊icon滾動(dòng)到頂部的功能。實(shí)現(xiàn)功能比較簡單，直接調(diào)用window.scrollTo(0, 0)，一行代碼完成。但是...

seanlook 2019-08-29 18:42 評(píng)論0 收藏0
requestAnimationFrame Web中寫動(dòng)畫的另一種選擇

摘要：現(xiàn)在又多了一種實(shí)現(xiàn)動(dòng)畫的方案，那就是還在草案當(dāng)中的方法。這個(gè)方法就是傳遞給的回調(diào)函數(shù)。為回調(diào)函數(shù)一個(gè)簡單的例子模擬一個(gè)進(jìn)度條動(dòng)畫，初始寬度為在函數(shù)中將進(jìn)度加然后再更新到寬度上，在進(jìn)度達(dá)到之前，一直重復(fù)這一過程。 HTML5/CSS3時(shí)代，我們要在web里做動(dòng)畫選擇其實(shí)已經(jīng)很多了: 你可以用CSS3的animattion+keyframes; 你也可以用css3的transition...

Prasanta 2019-08-19 14:48 評(píng)論0 收藏0