Resize window with smooth transition for different height sizes-CodePudding

Some context:
I'm working on a Chrome Extension where the user can launch it via default "popup.html", or if the user so desires this Extension can be detached from the top right corner and be used on a popup window via window.open

This question will also apply for situations where users create a Shortcut for the extension on Chrome via:
"..." > "More tools" > "Create Shortcut"

Problem:
So what I need is for those cases where users use the extension detached via window.open or through a shortcut, when navigating through different options, for the Height of the window to be resized smoothly.

I somewhat achieve this but the animation is clunky and also the final height is not always the same. Sometimes I need to click twice on the button to resize too because 1 click won't be enough. Another issue is there is also some twitching of the bottom text near the edge of the window when navigating.

Here's what I got so far:
(strWdif and strHdif are used to compensate for some issues with CSS setting proper sizes which I haven't figured out yet.)

const popup = window;

function resizeWindow(popup) {
  setTimeout(function () {
  var strW = getComputedStyle(window.document.querySelector(".body_zero")).getPropertyValue("width");
  var strW2 = strW.slice(0, -2);
  var strWdif = 32;
  var bodyTargetWidth = (parseFloat(strW2)   parseFloat(strWdif));
  var strH = getComputedStyle(window.document.querySelector(".body_zero")).getPropertyValue("height");
  var strH2 = strH.slice(0, -2);
  var strHdif = 54;
  var bodyTargetHeight = (parseFloat(parseInt(strH2))   parseFloat(strHdif));
  var height = window.innerHeight;

  console.log("Window Height: ", height, "CSS Height: ", bodyTargetHeight);

  var timer = setInterval(function () {
    if (height < bodyTargetHeight) {
      popup.resizeTo(bodyTargetWidth, height  = 5);
      if (height >= bodyTargetHeight) {
        clearInterval(timer);
      }
      } else if (height > bodyTargetHeight) {
        popup.resizeTo(bodyTargetWidth, height -= 5);
        if (height <= bodyTargetHeight) {
          clearInterval(timer);
        }
      } else {
        clearInterval(timer);
      }
    }, 0);
  }, 0400);
}

Question:
Is there a way to make this more responsive, and smooth and eliminate all the twitching and clunkiness?

I guess the issue might be that I am increasing/diminishing by 5 pixels at a time but that is the speed I need. Maybe there is another way to increase/decrease by 1px at a faster rate? Could this be the cause of the twitching and clunkiness?

Also, I should add that troubleshooting this is difficult because the browser keeps crashing so there is also a performance issue sometimes when trying different things.

EDIT:
Another option using resizeBy:

function animateClose(time) {
  setTimeout(function () {
  var strW = getComputedStyle(window.document.querySelector(".body_zero")).getPropertyValue("width");
  var strW2 = strW.slice(0, -2);
  var strWdif = 32;
  var bodyTargetWidth = (parseFloat(strW2)   parseFloat(strWdif));
  var strH = getComputedStyle(window.document.querySelector(".body_zero")).getPropertyValue("height");
  var strH2 = strH.slice(0, -2);
  var strHdif = 54;
  var bodyTargetHeight = (parseFloat(parseInt(strH2))   parseFloat(strHdif));

  var w = window.innerWidth; //Get window width
  var h = window.innerHeight; //Get window height

  var loops = time * 0.1; //Get nb of loops

  var widthPercentageMinus = (w / loops) * -0;
  var heightPercentageMinus = (h / loops) * -1;
  var widthPercentagePlus = (w / loops) *  0;
  var heightPercentagePlus = (h / loops) *  1;

  console.log("Window Height: ", h, "CSS Height: ", bodyTargetHeight);

  var loopInterval = setInterval(function () {
    if (h > bodyTargetHeight) {
      window.resizeBy(widthPercentageMinus, heightDecrheightPercentageMinuseasePercentageMinus);
    } else if (h < bodyTargetHeight) {
      window.resizeBy(widthPercentagePlus, heightPercentagePlus);
    } else {
      clearInterval(loopInterval);
    }
  }, 1);
}, 0400);
}

This one is a bit more smooth but I can't make it stop at the desired Height. It also is not differentiating between resizing up or down, also crashes the browser sometimes.

CodePudding user response：

maybe with requestAnimationFrame

try something like this (not tested):

function resizeWindow(popup) {
    var gcs = getComputedStyle(window.document.querySelector(".body_zero"));
    var strW = gcs.getPropertyValue("width");
    var strW2 = strW.slice(0, -2);
    var strWdif = 32;
    var bodyTargetWidth = (parseFloat(strW2)   parseFloat(strWdif));
    var strH = gcs.getPropertyValue("height");
    var strH2 = strH.slice(0, -2);
    var strHdif = 54;
    var bodyTargetHeight = (parseFloat(parseInt(strH2))   parseFloat(strHdif));
    var height = window.innerHeight;

    console.log("Window Height: ", height, "CSS Height: ", bodyTargetHeight);
    
    window.myRequestAnimationFrame =    window.requestAnimationFrame || window.webkitRequestAnimationFrame;
    var hStep = 2;      //choose the step. Must be an integer
    function internalFunc() {
        if (Math.abs(height - bodyTargetHeight) > hStep) {
            if (height < bodyTargetHeight)
                hStep *= 1;
            else if (height > bodyTargetHeight)
                hStep *= -1;
            popup.resizeBy(0, hStep);
            height  = hStep;
            window.myRequestAnimationFrame(internalFunc)            
        } else
            popup.resizeBy(0, bodyTargetHeight - height)
    }
    popup.resizeTo(bodyTargetWidth, height);
    window.myRequestAnimationFrame(internalFunc)
}

CodePudding user response：

<html>
<head>
  <script>
    const bodyTargetWidth = 150;
    const bodyTargetHeight = 250;   //target height
    var height;            //height at beginning

    window.myRequestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame;

    var hStep = 5; //choose the step. Must be an integer
    var dir;
    
    var myPopup;
    
    function doResize() {
        function internalFunc() {
            console.log('height: ', height) ;
            if (Math.abs(height - bodyTargetHeight) > hStep) {
                dir = Math.sign(bodyTargetHeight - height);
                
                myPopup.resizeBy(0, dir * hStep);
                height  = dir * hStep;
                
                window.myRequestAnimationFrame(internalFunc)
            } else
                myPopup.resizeBy(0, bodyTargetHeight - height)
        }
        if (!myPopup || myPopup?.closed)  {
            myPopup = window.open("about:blank", "hello", "left=200,top=200,menubar=no,status=no,location=no,toolbar=no");
            height = 150;
            myPopup.resizeTo(bodyTargetWidth, height);
        } else {
            myPopup.focus();
            height = myPopup.outerHeight
        }
        myPopup.resizeTo(bodyTargetWidth, height);
        window.myRequestAnimationFrame(internalFunc)
    }
    document.addEventListener('DOMContentLoaded', _ => document.getElementById('myBtn').addEventListener('click', doResize))
  </script>
</head>
<body>
    <button type="button" id="myBtn">Create popup<br>\<br>Reset popup height</button><br>
    <p>First create the popup, then change popup height and click the button above again</p>
</body>
</html>