After ResizeObserver event-CodePudding

I have a resizeObserver (https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) monitoring the change in size of a div. However, during the resize event I want to display the border of the div and then have it disappear after it finishes resizing.

To do this, I have a .tempBorder class which is to be added on the resize event:

Css:

.tempBorder {
        border: 1px solid red;
    }

Javascript:

var chartResizer = document.getElementById('chartResizer');
    var chartResizerResizeObserver = new ResizeObserver(() => {
        chartResizer.classList.add("tempBorder");
    }
    ).observe(chartResizer);

But I can't remove the class using chartResizer.classList.remove("tempBorder"); as there doesn't seem to be an event that gets triggered after the resize is completed than I can find.

I am aware that this might be deliberate as the after event would be triggered continuously during the resizing, so am wondering whether using setTimeOut in it instead is the better solution?

So something like this:

 var chartResizer = document.getElementById('chartResizer');
    var chartResizerResizeObserver = new ResizeObserver(() => {
        chartResizer.classList.add("tempBorder");
        myChart.resize();
        setTimeout(function(){
            chartResizer.classList.remove("tempBorder");
        }, 1000);
    }
    ).observe(chartResizer);

Do I have to do something like the second example or is there a more effective way to achieve what I want with an after event for resizeObserver?

CodePudding user response：

call

chartResizer.classList.remove("tempBorder");

on mouseup event