Element UI的 el-menu 组件在进行折叠动画时，可能会在某些情况下出现卡顿的问题，这通常与浏览器的渲染性能有关，特别是在涉及大量DOM操作或复杂动画的情况下。
css(elementui)折叠动画出现卡顿
代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
| <el-menu ref="menu" background-color="#030000" text-color="#a9abaf" active-text-color="#F57D2D"
class="el-menu-vertical-demo" :unique-opened="true" :default-active="defaultActive"
:default-openeds="defaultOpeneds" :router="true" @open="handleOpen" @close="handleClose"
:collapse="isCollapse" :collapse-transition="true">
<div class="main-title">
<h4>看护人员管理系统</h4>
</div>
<el-menu-item index="/home">
<i class="el-icon-s-home"></i>
<span slot="title">首页</span>
</el-menu-item>
<el-menu-item index="/importData">
<i class="el-icon-download"></i>
<span slot="title">数据导入</span>
</el-menu-item>
<el-submenu index="3">
<template slot="title">
<i class="el-icon-menu"></i>
<span>看护管理</span>
</template>
<el-menu-item index="/intoNurse">待转入看护</el-menu-item>
<el-menu-item index="/intoNurseManage">转入看护管理</el-menu-item>
<el-menu-item index="/assignNurse">外派看护</el-menu-item>
<el-menu-item index="/nurserRecord">看护记录</el-menu-item>
</el-submenu>
<el-submenu index="4">
<template slot="title">
<i class="el-icon-s-custom"></i>
<span>人员信息</span>
</template>
<el-menu-item index="/personAll">全部</el-menu-item>
<el-menu-item index="/onJobPerson">在岗人员</el-menu-item>
<el-menu-item index="/caregivers">看护人员</el-menu-item>
<el-menu-item index="/employee">离职人员</el-menu-item>
</el-submenu>
<el-menu-item index="/locale">
<i class="el-icon-location-information"></i>
<span>地区设置</span>
</el-menu-item>
<el-submenu index="5">
<template slot="title">
<i class="el-icon-s-operation"></i>
<span>系统设置</span>
</template>
<el-menu-item index="/userManage">用户管理</el-menu-item>
<el-menu-item index="5-2" disabled>修改密码</el-menu-item>
<el-menu-item index="5-3" disabled>数据备份</el-menu-item>
</el-submenu>
</el-menu>
|
由于使用了element的折叠菜单，:collapse="isCollapse" :collapse-transition="true"使用了这两个属性实现折叠与折叠动画，出现了明显卡顿。
卡顿原因
Element UI的 el-menu 组件在进行折叠动画时，可能会在某些情况下出现卡顿的问题，这通常与浏览器的渲染性能有关，特别是在涉及大量DOM操作或复杂动画的情况下。
解决方案
1
2
3
4
| .el-menu-vertical-demo:not(.el-menu--collapse) {
width: 200px;
height: 100%;
}
|
解决原因
加上 .el-menu-vertical-demo:not(.el-menu–collapse) 这段 CSS 代码之后不再卡顿的原因是:
:not(.el-menu–collapse) 选择器排除了折叠状态的菜单
为展开状态的菜单设置了固定的宽高:width: 200px; height: 100%
在菜单展开/折叠时,不再触发宽高的改变,避免了折叠时频繁的 DOM 重排
移除了宽高改变时的复杂计算和渲染,所以动画更流畅
具体分析:
ElementUI 的 el-menu 在默认状态下,宽度由菜单内容决定,会随着展开/折叠而改变
动画过程中,菜单宽度的改变会触发复杂的 DOM 重排、图层合成等操作
而 Transition 动画本身就需要大量的 GPU 资源,如果再配合 DOM 操作,就会出现卡顿
所以通过 CSS 固定宽高,避免了动画过程中的 DOM 改变,减轻了 GPU 负载,动画更流畅
:not() 选择器可以精确定位到展开状态的菜单,对折叠状态不生效,避免样式冲突
所以这实际上是一种优化动画性能的常见手段,通过减少 DOM 操作次数,达到优化动画流畅度的效果。
这可以解决卡顿的问题，因为在非折叠状态下，菜单的宽度被固定，不会随着折叠状态的改变而变化，这样可以减少浏览器的重排（reflow）和重绘（repaint）操作，从而提高性能。
总结
在elementui中出现太多菜单的时候使用折叠动画会触发浏览器的重排或重载dom。由于动画需要改变宽和高，所以可以给菜单设置固定的宽和高从而避免动画修改宽高而触发重排出现性能卡顿。
重排（Reflow）：
重排是指浏览器重新计算并更新元素的几何属性和布局信息的过程。这通常发生在以下情况下：
添加、删除或修改DOM元素。
改变元素的样式，如修改宽度、高度、边距、定位等。
改变窗口大小。
重排会触发整个渲染流程的重新计算，因此是一项开销昂贵的操作，特别是在复杂的页面上。频繁的重排会导致页面卡顿和性能下降。
重绘（Repaint）：
重绘是指浏览器根据元素的样式更改重新绘制元素的过程，但不会影响元素的布局。这通常发生在以下情况下：
修改元素的颜色、背景色、文本内容等与几何布局无关的属性。
滚动页面。
重绘比重排成本低，但仍然会影响性能，尤其是在大规模重绘的情况下。