Question

我正在构建一个模板，其顶部有大型导航按钮，点击后，从按钮下方滑出相应的页面（绝对定位的DIV），并通过CSS过渡填充整个页面。

我在窗口调整大小功能中有一系列命令，如果窗口改变大小，可以保持所有内容/正确的大小。一切正常，除了一个小问题，当页面“out”时，如果浏览器窗口垂直调整大小，CSS高度转换触发而不是DIV立即捕捉到新高度（DIV为100％）宽度和动态计算的高度使其完全填充导航按钮下方的屏幕）。我的解决方案是添加一行代码，在更新高度之前将过渡属性更改为不包括高度，然后立即将其更改回来。它似乎什么都不做。我的代码：

window.addEventListener('resize', function(event){
    bottomLoc = findBottom.getBoundingClientRect();

    if (pageOut1 == false) {
        pageLoc1 = pageButton1.getBoundingClientRect(); //redefine location variable
        document.getElementById("page1").style.top = pageLoc1.top + 70 + "px"; //update closed page position
        document.getElementById("page1").style.left = pageLoc1.left + "px"; //update closed page position
    } else if (pageOut1 == true) {
        document.getElementById("page1").style.transition = "width 0.5s, left 0.5s"; //turn off height transition
        document.getElementById("page1").style.height = bottomLoc.bottom  - 70 + "px"; //update height
        document.getElementById("page1").style.transition = "height 0.5s, width 0.5s, left 0.5s"; //turn height transition back on
    }
});

似乎没有工作的部分在“else if”语句中。即使我在高度更新发生之前取出“高度0.5s”，它仍然会进行过渡。这不是一个巨大的网站破坏问题，但它确实会导致滚动条随机出现并在调整大小时消失，这看起来很糟糕。

希望有人可以帮助我理解为什么这不起作用，因为这将有助于我需要动态重新定位绝对定位元素的许多其他模板。谢谢！

暂时禁用窗口大小调整的CSS转换？

0 个答案: