In the background administration project, the sidebar in Element was used. When implementing the expansion and contraction functions, it was found that the actual effect was not quite the same as the official demo effect, as shown in the figure:



The animation effect should have been transferred directly from the left picture to the middle picture, but the actual effect was transferred from the left picture to the right picture and then to the middle picture, which was obviously wrong. Later, I found in an online post that there was another style in the official document which I neglected:

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
Copy the code

Add this style to solve the problem