Chrome 调整窗口大小，并为不同高度大小提供平滑过渡

6tdlim6h 于 2022-12-06 发布在 Go

关注(0)|答案(2)|浏览(171)

**一些背景：**我正在开发一个Chrome扩展，用户可以通过默认的“popup.html”启动它，或者如果用户需要，这个扩展可以从右上角分离，并通过window.open在弹出窗口中使用

此问题也适用于用户通过以下方式为Chrome上的扩展创建快捷方式的情况：
“...”〉“更多工具”〉“创建快捷方式”

**问题：**因此，我需要的是，对于用户通过window.open或通过快捷方式使用分离的扩展的情况，当通过不同的选项导航时，窗口的高度可以平滑地调整大小。

我在一定程度上做到了这一点，但动画是笨重的，而且最终的高度也不总是相同的。有时我需要点击两次按钮来调整大小，因为一次点击是不够的。另一个问题是，在导航时，靠近窗口边缘的底部文本也有一些抽搐。

以下是我目前得到的结果：（strWdif和strHdif用于补偿CSS设置适当大小的一些问题，我还没有弄清楚。）

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);
}

**问题：**有没有办法让它的响应更快、更流畅，并消除所有的抽搐和笨拙？

我想问题可能是我一次增加/减少5个像素，但这正是我需要的速度。也许有另一种方法可以以更快的速度增加/减少1 px？这会是抽搐和笨拙的原因吗？
此外，我应该补充的是，故障排除这是困难的，因为浏览器不断崩溃，所以也有一个性能问题，有时当尝试不同的东西。

**EDIT：**使用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);
}

这一个是一个有点更顺利，但我不能使它停止在所需的高度。它也是不区分大小或上下，也崩溃的浏览器有时。

google-chrome

来源：https://stackoverflow.com/questions/74431816/resize-window-with-smooth-transition-for-different-height-sizes

2条答案

按热度按时间

nxagd54h1#

可能使用requestAnimationFrame
请尝试以下内容（未测试）：

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)
}

赞(0）回复(0）举报 2022-12-06

jdzmm42g2#

<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>

赞(0）回复(0）举报 2022-12-06

我来回答

Chrome 调整窗口大小，并为不同高度大小提供平滑过渡

2条答案

相关问题

热门标签

最新问答