提个关于鼠标事件的问题

Question

首先贴出网址：
想要实现的效果的网址

如上链接里的网址里是如何实现自由的切换两边的大小的，如果用鼠标的mouseEnter和mouseLeave事件，是如何解决，当我鼠标放到左边，左边增大，再直接移入右边时，没有停顿，右边迅速变大，左边变小的。我用上面的两个事件写出来的效果就会出线停顿而且无法直接移入就启动效果，而是要先移除所有区域，再移入才会产生效果，它这是怎么实现？

Answer 1

简单实现。
默认样式写好
加鼠标悬浮事件，左边悬浮，2个部分的父级加class，显示左边大效果，
在样式中根据父级的class写对应的样式，覆盖掉原本的样式，动画使用css3的动画

Answer 2

恩下 f12 不就知道了吗

左右多半开 然后transform: skew(-5deg) translateZ(0);

动画用的是 css的 transition 而不是js的