beremiz

SVGHMI: fading page switch : defer update of classList to next animate() call when finishing transition.

2022-06-15, Edouard Tisserant
f86ffe291fea
Parents 7d4a16e59337
Children b90a0acc8c4e
SVGHMI: fading page switch : defer update of classList to next animate() call when finishing transition.

classList update was happening in the same call as switch_page(), but this call is not meant to do any change in the DOM. This was triggering unwanted style and layout recomputation.
1 files changed, 6 insertions(+), 2 deletions(-)
  • +6 -2
    svghmi/svghmi.js
    • --- a/svghmi/svghmi.js Tue Jun 14 11:56:05 2022 +0200
    +++ b/svghmi/svghmi.js Wed Jun 15 11:39:14 2022 +0200
    @@ -203,13 +203,14 @@
    }
    +var page_fading_in_progress = false;
    function fading_page_switch(...args){
    svg_root.classList.add("fade-out-page");
    + page_fading_in_progress = true;
    setTimeout(function(){
    switch_page(...args);
    - svg_root.classList.remove("fade-out-page");
    - },10);
    + },1);
    }
    document.body.style.backgroundColor = "black";
    @@ -513,6 +514,9 @@
    }
    svg_root.setAttribute('viewBox',new_desc.bbox.join(" "));
    + if(page_fading_in_progress)
    + svg_root.classList.remove("fade-out-page");
    + page_fading_in_progress = false;
    current_visible_page = page_name;
    };