element Menu卡顿问题

问题现象

卡顿原因

element Menu的收起动画是使用element框架中的动画组件包裹实现的，

menu-item是通过判断是否collapse，开控制渲染的内容是完整的item还是只渲染图标加tooltip的悬浮提示，这边是没有过渡动画的

整个动画组件是利用vue的transition组件做的动画封装，通过修改父级dom的宽度和透明度来实现动画的过度效果


通过修改样式我们可以模拟出menu组件在收起时的过渡状态。

vue组件会优先执行dom的过渡动画效果，等动画结束之后，在执行DOM 操作 (插入/删除)，menu的组件使用的过渡效果时0.3s，动画结束之后就会执行DOM 操作 (插入/删除)，当menu组件所在的页面布局比较复杂，menu在执行动画的过程中是会实时改变width的，同是导致页面布局改变，导致大量的页面元素发生实时的重绘和页面回流，这个过程是比较消耗浏览器性能的，同时menu组件的父级是没有过渡动画的。如此便导致了menu组件在收起时，动画显得非常的卡顿。

优化方式

卡顿原因主要是menu组件宽度改变导致其父节点及其他节点的重绘回流导致，所以处理好其父节点及其他节点的过渡效果就可以改善该问题，
通过配置停用menu自带的动画，同时给menu所在页面的父节点分别加上过渡动画。

左侧父节点使用收缩动画，右侧使用扩张动画，动画使用css3的transition属性做过渡效果，左侧使用fixed定位，让其脱离文档流，在收起时，同时开启左右动画，由于左侧是fixed定位，两个大小改变并不会相互影响，同时menu没有动画，在收起前，内部容易就已经折叠，在执行左侧动画时，浏览器需要重绘的计算内容更少，效率更高。
最终实现了相对刘畅的收起动画。