Crosshairs not animated / smooth

[MarkLyck]

• G2 Version: 4.0.7
• Platform: Google Chrome
• Mini Showcase: https://ttprivatenew.s3.amazonaws.com/pulse/markl74/attachments/13447851/TinyTake610807356.mp4

I need to display a "crosshar" text with the tooltip.

Here's the code:

chart.tooltip({
    showCrosshairs: true,
    showTitle: false,
    itemTpl: '<li class="chart-tooltip {className}">{value}</li>',
    crosshairs: {
      type: 'x',

      // @ts-ignore
      text: (type: string, defaultText: any) => {
        if (type === 'x') {
          return {
            offset: 5,
            position: 'end',
            content: format(defaultText, 'dd MMM yyyy'),
            style: {
              textAlign: 'center',
              textBaseline: 'top',
              fontSize: 14,
              fontWeight: '500',
              fill: theme.colors.lightGray,
            },
          }
        }
      },
      textBackground: {
        padding: [2, 4],
        style: {
          fill: theme.colors.text,
          opacity: 1,
        },
      },
    },
  })

However, while the tooltip moves smoothly from 1 position to the other. The Crosshair text has no animation. It doesn't move like the tooltip.

Instead it just instantly appears and instantly disappears.

As a user, I would expect the tooltip and the crosshairText to both move smoothly.

[hustcc]

We will add this small optimization in version 5.