Изменение размера триггеров с плавным переходом

Question

Изменение размера триггеров с плавным переходом

1

Моя панель имеет боковую панель, которая может быть скрыта/показана с плавным переходом, занимающим 0.5 с. К сожалению, это изменение размера приводит к изменению размера события, которое меняет ширину моих диаграмм. Проблема в том, что ширина моей внутренней оболочки содержимого мгновенно получается, когда я нажимаю, когда изменение размера еще не произошло.

Если я удаляю плавный переход, все ведет себя так, как предполагалось, но я этого хочу. Не уверен, что это можно сделать, используя некоторую форму сна за 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.

Я был бы благодарен за ваши мысли о ситуации. Какой-то "хак", о котором я думал, вычитает ширину боковой панели, так как он ведет себя как противоположность, которая мне нужна, но она не похожа на хорошую практику.

Michal Fašánek 06 сен. 2017, в 16:07

Источник

Теги:

javascript

css

resize

event-listener

1 ответ

Ещё вопросы

Michal Fašánek · Answer 1 · 2017-09-07T06-16-00.000Z

Я закончил тем, что делал это очень нечистым способом, который оставляет мне плохой вкус.

Я использовал сон, чтобы ждать перехода к разрешению. Это означает, что 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 переходит к браузеру и продолжает выполнять код, поэтому обратный вызов выполняется до перехода.