javascript - 通过平滑过渡调整触发器大小

Question

我的仪表板有一个可以隐藏/显示的侧边栏，平滑过渡耗时 0.5 秒 不幸的是，此调整大小会触发“调整大小”事件，从而改变图表的宽度。问题是，当我单击时，在尚未调整大小的情况下，会立即获取内部内容包装器的宽度。

如果我删除平滑过渡，一切都会按预期运行，但我有点想要它。不确定是否可以通过某种形式的 sleep 0.5 秒来完成。

static toggleSidebar() {
        const arrow_image_source = document.getElementById("toggleImg").src.toString().split('/').pop();

        // hidden, displaying
        if(arrow_image_source === "sidebar_arrow_right.png"){
            document.getElementById("toggleImg").src="../../assets/img/sidebar_arrow_left.png";
            document.getElementById("sidebarWrapper").style.marginLeft = "0px";
            document.getElementById("pageContentWrapper").style.paddingLeft = "260px";
        }
        // displayed, hiding
        else{
            document.getElementById("toggleImg").src="../../assets/img/sidebar_arrow_right.png";
            document.getElementById("sidebarWrapper").style.marginLeft = "-200px";
            document.getElementById("pageContentWrapper").style.paddingLeft = "60px";
        }
        window.dispatchEvent(new Event('resize'));

/**
 * Calculate & Update state of new dimensions
 */
updateDimensions() {

        const parent = window.document.getElementById('wideChart');
        let update_width  = parent.offsetWidth;
        let update_height = parent.offsetHeight-100 || Math.round(update_width/3);
        this.setState({ width: update_width, height: update_height});

}

#pageContentWrapper {
    overflow-y: auto;
    padding: 0 30px 30px calc(var(--sidebar-width) + var(--sidebar-toggler-width) + 30px);
    height: calc(100% - var(--header-height));
    width: 100%;
    position: absolute;
    margin-top: 60px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;

}

重要的一行是

window.dispatchEvent(new Event('resize'));

调整大小后调用，以强制更新我的eventListener。

我将不胜感激您对情况的看法。我想到的某种“黑客”是减去侧边栏的宽度，因为它的行为就像我需要的相反，但感觉不是一个好的做法。

Answer 1

我最终以一种非常不干净的方式做了这件事，让我的嘴里留下了不好的味道。

我使用 sleep 来等待转换解决。这意味着 JS 在转换结束之前将无法使用，但我想半秒不会给用户提供足够的空间来尝试做任何事情。

这是一个例子:

static async toggleSidebar() {
    const sleepTime = 500;
    const fractions = 10;
    const fraction = sleepTime/fractions;
    for(let i = 0; i < 10; i++){
        await LeftSidebar.sleep(fraction);
        window.dispatchEvent(new Event('resize'));
        }
    }

static sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

循环分数会休眠，因此它仍然具有宽度和高度上类似过渡的变化的平滑感觉。

注意:我尝试使用回调函数来解决等待转换但无法使其工作，可能是因为JS将转换传递给浏览器并继续执行代码，即为什么回调在转换之前执行。