Version Background:

Antd :4.6.6 React :16.13.1 Browser: ChromeCopy the code

Question:

The page layout is as follows:

When the transition animation is added to the left and right parts of the dynamic scaling part, columns in the table are also transformed, causing the columns flashing problem.

The reason:

When table width changes, TD adaptive width increases/decreases the number of TD at the same time, resulting in multiple td width changes and flicker.

Table TD width conversion problems are as follows (9 cases are analyzed) :

– 1.table fixed width [sum(td width) > table width && Td content is not exceeded】

Td width is reduced by three TD widths!

– 2.table fixed width [sum(td width) > table width && Td content beyond】

As you can see from the figure above, TD width is completely controlled by the content and the table width is not displayed according to the style specified width

– 3.table fixed width [sum(td width) < table width && Td content beyond】

As you can see from the figure above, TD width is completely controlled by the content and the width of the table is displayed according to the width specified by the style

– 4.table fixed width [sum(td width) < table width && Td content beyond Fixed layout】

** As can be seen from the figure above, TD width is magnified in proportion to three TD widths

– 5.table fixed width [sum(td width) > table width && Td content beyond Fixed layout】

As can be seen from the figure above, TD width is scaled down according to three TD widths, but the width of the table is not displayed in the specified style

– 6.table fixed width [Td width is undetermined Fixed layout】

As can be seen from the figure above, TD width is evenly distributed among the three TDS and the table width is displayed in the specified style

– 7.table fixed width [Td width is undetermined】

As can be seen from the figure above, TD width is completely spread out in proportion to the content and the table width is not displayed in the specified style

– 8.table width unspecified [Td fixed width Fixed layout】

Table width is not equal to sum(TD width)

– 9.table width unspecified [Td fixed width】

Table width is not equal to sum(TD width)

Fixed layout && TD fixed width, TD width is calculated by the browser according to the td ratio,

Then look at the antD table layout:

In other words, in this layout, the colunm width of ANTD is calculated according to the width of our column browser. Therefore, it can be inferred that when the width of the parent component on which table depends changes, the browser will change according to the latest width.

React update mechanism changes the width of the table TD and the number of columns. React update mechanism changes the width of the table TD and the number of columns.

Final solution: Get rid of transition

Ps: Some transition does enhance interaction, but use it wisely