Article From:https://segmentfault.com/q/1010000011707931
Question:

The timer is still running when you switch the browser tab or close the browser, but the page does not execute the animation, but wait until you open the browser animation.

The use of animation is achieved by increasing the rotateX value.

                frontDom.style.transform = 'rotateX(' + (parseInt(frontAngle) + 180) + 'deg)';
                backDom.style.transform = 'rotateX(' + (parseInt(backAngle) + 180) + 'deg)';

Write a small demo, the code is a bit long, my solution is to statistical timer execution time, beyond the timer execution time does not flip. Is there any other better way? At present, I only think of another way to lose focus.

<!DOCTYPE html>
<html>
<head>
    <title></title>
<link rel="stylesheet" type="text/css" href="iconfont.css">
<style type="text/css">

.box {
    position: relative;
    perspective: 200px;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 200px;
}

.box > * {
    position: absolute;
    font-size: 50px;
    top: 0;
    left: 0;
    backface-visibility: hidden;
    transition: transform 500ms;
}
</style>
</head>
<body>
<div id="a">
    3
</div>
</body>
<script>
function getRotateXValue(matrix) {
        var groups = matrix.match(/(?:[^,]+,){5}\s*([^,]+),\s*([^,]+)/);
        var angle;
        if (groups) {
            var numbers = groups.slice(1).map(function(n) { return Number(n); });
            angle = Math.atan(numbers[1] / numbers[0]) / Math.PI * 180 + (numbers[0] < 0 ? 180 : 0);
            if (angle < 0) {
                angle += 360;
            }
        } else {
            angle = 0;
        }
        return parseInt(angle);
}

function replaceNumber2Html(nubmer) {
    //return '<i class="iconfont icon-number' + nubmer +'"></i>';
    return '<span>' + number + '</span>'
}

function createBoxElement(number) {
    var box = document.createElement('div');
    box.className = 'box';
    var numberHtml = replaceNumber2Html(number);
    box.innerHTML = numberHtml + numberHtml;
    box.childNodes[0].style.transform = 'rotateX(0deg)';
    box.childNodes[1].style.transform = 'rotateX(180deg)';
    return box;
}

function getChangeDom(box) {
    var nodes = box.childNodes;
    var angle = getRotateX(nodes[0].style.transform);
    return angle % 360 == 0 ? nodes[1] : nodes[0];
}

function getRotateX(transform) {
    var match = /rotateX\((-?\d*)deg\)/.exec(transform);
    if (!match) {
        console.log('Unable to get rotateX')Return 0;} else {Return match[1];}}Function addZero (numb)Er, length) {Var zeroString = '';For (VaR I = 0; I < length; i++) {ZeroString+ ='0';}Return (zeroString + number).Slice (-length);}Function randomValue () {ReturN Math.floor (Math.random () * 20) + 11;}Var wordContainer = document.getElementById ('a');Var numbEr = parseInt (wordContainer.innerText);While (wordContainer.firstChild) {WordContainer.removeCHild (wordContainer.firstChild);}Number.toString ().Split (').ForEach (function (item) {Var box= createBoxElement (item);WordContainer.appendChild (box);});Function rotateWord (newNumber) {If (newNumber) {Var newNumberStr = newNumber.toString ();Var numberStr = numbeR.toString ();Var isAdd = false;If (newNumberStr.length = numberStr.length) {Var newBox = createBoxElement (newNumberStr.substring (0, 1));WordContainer.inserTBefore (newBox, wordContainer.firstElementChild);IsAdd = true;}If (ISAdd) {NumberStr = addZero (numberStr, newNumberStr.length);}Var inteRval = newNumberStr.split (')'.Map (function (newNumberChar, index) {Return newNumberChar- numberStr[index];});Var boxNodes = wordContainer.childNodes;Interval.fOrEach (function (changeNumber, index) {If (changeNumber = 0) {Var chaNgeDom = getChangeDom (boxNodes[index]);//changeDom.className = changeDom.className.Replace (/\d/, newNumberStr[index]);ChangeDom.innerText = newNumberStr[index];Var frontDom = boxNodes[index].childNodes[0];Var backDom = boxNodes[indeX].childNodes[1];Var frontAngle = getRotateX (frontDom.style.transform);Var backAngle = getRotateX (backDom.style.transform);FrontDom.style.transform ='rotateX ('+ (parseInt (frontAngle) + 180) +'deg)';BackDom.style.transform ='rotaTeX ('+ (parseInt (backAngle) + 180) +'deg)';}});Number = parseInt (NE)WNumber);}};Var time = 1000;Var lastTime = Date.now ();Var deltaTime = 0;SetTimeout (funct)Ion timeoutTimer () {Var now = Date.now ();DeltaTime = now - lastTime;LastTime = now;If (deltaTime < time * 1.2) {Var newNumber = number + randomValue ();RotateWoRd (newNumber);}SetTimeout (timeoutTimer, time);}, time);< /script>< /html>

Answer 0:

Switching browser tabs or picking up the browser, in general, means that the browser loses focus, so you just need to use window. onblur to handle it. When the browser loses focus, turn off the timer and get the focus, and then open it again.

Answer 1:

setTimeout===>requestAnimationFrame

Answer 2:

This is better handled with CSS3.

Similar Posts:

Leave a Reply

Your email address will not be published. Required fields are marked *