多ApexCharts图表场景下侧边栏hover无响应及图表resize异常问题

• 基于ApexCharts搭建的仪表盘系统，侧边栏原本在hover时应水平展开：仅包含单个图表时，侧边栏动画表现正常；但添加多个图表后，侧边栏不再展开，图表也无法按预期resize。
• 怀疑是动画期间图表多次重绘导致的性能问题。
• 曾尝试在侧边栏动画开始时销毁图表，动画结束后重新绘制，但这会引发新问题：图表上的过滤、缩放等用户操作状态会在动画结束后恢复为默认设置，相关代码如下：

document.querySelector(".sidebar").addEventListener("transitionstart", function(event) {
    if (event.propertyName === 'width') {
        chart3.destroy();
        chart2.destroy();
        chart.destroy();
    }
});

document.querySelector(".sidebar").addEventListener("transitionend", function(event) {
    if (event.propertyName === 'width') {
        // Recreate and re-render charts
        chart3 = new ApexCharts(document.querySelector("#chart3"), options3);
        chart3.render();
        chart2 = new ApexCharts(document.querySelector("#chart2"), options2);
        chart2.render();
        chart = new ApexCharts(document.querySelector("#chart1"), options);
        chart.render();
    }
});

请问该问题的原因是什么？有哪些有效的调试方法？

内容的提问来源于stack exchange，提问作者ndlphong