Crosshairs not animated / smooth

* **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: '

{value}

',
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.