解决elment-ui折叠和收缩导航栏延时动画效果

解决方法：

1、最外层包一层div

2、通过div类名设置样式穿透

.ibps-layout-header-aside-menu-side >>> .collapse-transition {
  -webkit-transition: 0s height, 0s padding-top, 0s padding-bottom;
  transition: 0s height, 0s padding-top, 0s padding-bottom
}

.ibps-layout-header-aside-menu-side >>> .horizontal-collapse-transition {
  -webkit-transition: 0s width, 0s padding-left, 0s padding-right;
  transition: 0s width, 0s padding-left, 0s padding-right
}

.ibps-layout-header-aside-menu-side >>> .horizontal-collapse-transition .el-submenu__title .el-submenu__icon-arrow {
  -webkit-transition: 0s;
  transition: 0s;
  opacity: 0
}

补充知识点：

style 的样式穿透 使用>>>

外层 >>> 第三方组件 
样式

.wrapper >>> .swiper-pagination-bullet-active
background: #fff

sass和less的样式穿透 使用/deep/

外层 /deep/ 第三方组件 {
样式
}
.wrapper /deep/ .swiper-pagination-bullet-active{
background: #fff;
}

现在最新统一使用 ::v-deep

::v-deep在预处理器 scss 、sass、less 比较通用

现在最新scss使用 :deep()

例: 

:deep(.el-tabel) {
}