解决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;
    }