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

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

• 解决方法：

  • 最外层包一层div
  • 通过div类名设置样式穿透

  .layout-aside-menu /deep/ .collapse-transition {
    -webkit-transition: 0s height, 0s padding-top, 0s padding-bottom;
    transition: 0s height, 0s padding-top, 0s padding-bottom;
  }
  
  .layout-aside-menu /deep/ .horizontal-collapse-transition {
    -webkit-transition: 0s width, 0s padding-left, 0s padding-right;
    transition: 0s width, 0s padding-left, 0s padding-right;
  }
  
  .layout-aside-menu /deep/ .horizontal-collapse-transition .el-submenu__title .el-submenu__icon-arrow {
    -webkit-transition: 0s;
    transition: 0s;
    opacity: 0;
  }

• 补充点：

  • stylus的样式穿透 使用 >>>

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

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

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