Question

我的信息中心有一个侧栏，可以隐藏/显示平滑过渡占用0.5秒不幸的是，这个调整大小的触发器＆＃39; 调整大小＆＃39;正在改变我的图表宽度的事件。问题是，当我点击时，当没有调整大小时，我会立即获得内部内容包装器的宽度。

如果我删除平滑过渡，一切都表现得如此，但我有点想要它。不确定是否可以使用0.5s的某种形式的睡眠来完成。

＆＃13;

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

＆＃13;

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

＆＃13;

重要的一行是

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

在调整大小后调用以强制更新 eventListener 。

我很感激你对情况的看法。某种＆＃34; hack＆＃34;我认为是减去侧边栏的宽度，因为它的行为与我需要的相反，但它不是一种好习惯。

Answer 1

我最后以一种非常不洁净的方式做到了这一点，这让我的口中留下了不好的味道。

我使用睡眠等待转换解决。这意味着 JS在转换完成之后将无法使用，但我想半秒不会为用户提供足够的空间来尝试做任何事情。

以下是一个例子：

＆＃13;

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

＆＃13;

循环分数会睡眠，因此它仍然具有平滑的宽度和高度变化的感觉。

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

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

1 个答案: