[JavaScript知识库] 解决ElementUi Nav侧边栏折叠的卡顿一下的问题

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 解决ElementUi Nav侧边栏折叠的卡顿一下的问题 -> 正文阅读

[JavaScript知识库]解决ElementUi Nav侧边栏折叠的卡顿一下的问题

问题

使用ElementUi Nav侧边栏自带的折叠动画，文字会卡顿一下再消失，非常难受
在这里插入图片描述

解决方案

百度找到一些方案是关闭自带折叠动画后自己写，可是我用的时候还是会有缺陷，展开时下方会有横向滚动条一闪而过。
使用官方的折叠动画没有，所以我的方案是开启折叠动画后解决滚动条的问题，自己写个过渡，再把文字消失的速度加快，这样能比较流畅的折叠展开 (ノへ￣、)
在这里插入图片描述

css代码

/* 加过渡给侧边导航*/
.el-aside {
  transition: width 0.25s;
  -webkit-transition: width 0.25s;
  -moz-transition: width 0.25s;
  -webkit-transition: width 0.25s;
  -o-transition: width 0.25s;
}
/*加快侧边栏文字消失的速度*/
.el-menu {
  transition: all 10ms;
}