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

  • 解决方法:

    1. 最外层包一层div

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

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      .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;
      }
  • 补充点:

    1. stylus的样式穿透 使用 >>>

      外层 >>> 第三方组件 {

      样式

      }

      1
      2
      .wrapper >>> .swiper-pagination-bullet-active
      background: #fff
    2. sassless的样式穿透 使用 /deep/

      外层 /deep/ 第三方组件 {

      样式

      }

      1
      2
      3
      .wrapper /deep/ .swiper-pagination-bullet-active{
      background: #fff;
      }
赞赏

本文地址: http://yoursite.com/2019/12/12/%E8%A7%A3%E5%86%B3elment-ui%E6%8A%98%E5%8F%A0%E5%92%8C%E6%94%B6%E7%BC%A9%E5%AF%BC%E8%88%AA%E6%A0%8F%E5%BB%B6%E6%97%B6%E5%8A%A8%E7%94%BB%E6%95%88%E6%9E%9C/