Drilldown animation is stuck if chart.resize is called during the animation

[dirslashls]

Version

5.3.1

Link to Minimal Reproduction

No response

Steps to Reproduce

1. Go to https://echarts.apache.org/examples/en/editor.html?c=bar-drilldown
2. Change animationDurationUpdate setting to 10 seconds (10000) (this is only so it is possible to easily reproduce the issue by manually resizing while the chart is animating).
3. At the end of the existing code, add the following

const resizer = new ResizeObserver((entries) => {
  console.debug('chart resized');
  myChart.resize()
  });
resizer.observe(document.getElementById('chart-panel'));

4. Now click on any bar and as the animation is happening resize the window.

Current Behavior

The chart gets stuck with the intermediate animated positions.

Expected Behavior

I tried this for bar racing charts also and there it doesn't seem to happen. However, that could be because there is a separate thread that is also continuously updating the chart with new data.

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

It seems like the chart.resize shouldn't be executed (or may be queued) till the animation is complete. I experimented by explicitly tracking whether the animation is going on or not (by listening to the 'finished' event) and not calling the resize and it seems to work. It would be good to have this available from this wonderful framework itself.

[dirslashls]

Note that, with the workaround I mentioned above, while it works, the UX is not great. See the attached video. Ideal behavior I think would be the animation should happen correctly as the resize happens

https://user-images.githubusercontent.com/2200491/159216719-3279a062-91a6-4b45-a8e6-d6fdfcc84657.mov

.

[dirslashls]

@pissang , any thoughts on this?

[pissang]

@dirslashls It's confirmed to be a bug

[dirslashls]

Seems like #14848 is related (animation & resize).