html - 在 css 转换下消除 ul 高度的波动

Question

以下代码用于定义我使用的侧边导航的样式。没有任何过渡效果很好。

SCSS 代码和工作 JSFiddle

.side-nav{
  position: fixed;
  z-index: 100;
  right: 0;
  margin-top: 15vh;

  ul {
    list-style: none;
    background: red;
    border-style: solid;
    border-right-style: none;
    border-width: 3px;
    border-color: blue;
    @include border-radius(20px, 0, 20px, 0);
    width: 1cm !important;
  }

  li {
    position: relative;
    display: block;
    right: 0;
    width: 1cm;

    span {
      white-space: pre;

      &.short {
        color: black;
        display: block;
      }

      &.long {
        display: none;
        color: white;
      }
    }

    &:hover {
      right:200%;
      width: 3cm;
      @include border-radius(20px, 0, 20px, 0);
      border-style: solid;
      border-right-style: none;
      border-width: 3px;
      border-color: blue;
      background: red;
      margin: -3px 0;

      span {
        &.short {
          display: none;
        }

        &.long {
          display: block;
        }
      }
    }
  }

  a {
    position: relative;
    display: block;
    text-decoration: none;

    padding: 10px 0;
    text-align: center;
  }
}

但是，当您添加转换代码时，正如您在 JSFiddle 上看到的那样，ul 的高度会波动。

SCSS 代码和 JSFiddle这说明了问题

.side-nav{
  position: fixed;
  z-index: 100;
  right: 0;
  margin-top: 15vh;

  ul {
    list-style: none;
    background: red;
    border-style: solid;
    border-right-style: none;
    border-width: 3px;
    border-color: blue;
    @include border-radius(20px, 0, 20px, 0);
    width: 1cm !important;
  }

  li {
    position: relative;
    display: block;
    right: 0;
    width: 1cm;
        @include transition(all 1s);

    span {
      white-space: pre;

      &.short {
        color: black;
        display: block;
      }

      &.long {
        display: none;
        color: white;
      }
    }

    &:hover {
          @include transition(all 1s);
      right:200%;
      width: 3cm;
      @include border-radius(20px, 0, 20px, 0);
      border-style: solid;
      border-right-style: none;
      border-width: 3px;
      border-color: blue;
      background: red;
      margin: -3px 0;

      span {
        &.short {
          display: none;
        }

        &.long {
          display: block;
        }
      }
    }
  }

  a {
    position: relative;
    display: block;
    text-decoration: none;

    padding: 10px 0;
    text-align: center;
  }
}

这是在我考虑边框并尝试在不改变高度的情况下使所有内容保持一致时引起的。为了使 li 元素的顶部和底部边框与 ul 元素的边框融为一体，我使用了代码行 margin: -3px 0。这是因为边框宽度为 3px。

我的问题是如何使边距和边框的缓和使得 ul 的高度在整个过渡过程中保持不变？

Answer 1

您在悬停时添加边框，这会改变 li 的高度。

相反，给它一个默认的透明边框，只需在悬停时更改边框颜色。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.side-nav {
  position: fixed;
  z-index: 100;
  right: 0;
  margin-top: 1vh;
}
.side-nav ul {
  list-style: none;
  background: red;
  border-style: solid;
  border-right-style: none;
  border-width: 3px;
  border-color: blue;
  -moz-border-top-left-radius: 20px;
  border-top-left-radius: 20px;
  -moz-border-top-right-radius: 0;
  border-top-right-radius: 0;
  -moz-border-bottom-left-radius: 20px;
  border-bottom-left-radius: 20px;
  -moz-border-bottom-right-radius: 0;
  border-bottom-right-radius: 0;
  width: 1cm !important;
}
.side-nav li {
  position: relative;
  display: block;
  right: 0;
  width: 1cm;
  border: 3px solid transparent;
  -webkit-transition: all 1s;
  transition: all 1s;
}
.side-nav li span {
  white-space: pre;
}
.side-nav li span.short {
  color: black;
  display: block;
}
.side-nav li span.long {
  display: none;
  color: white;
}
.side-nav li:hover {
  -webkit-transition: all 1s;
  transition: all 1s;
  right: 200%;
  width: 3cm;
  -moz-border-top-left-radius: 20px;
  border-top-left-radius: 20px;
  -moz-border-top-right-radius: 0;
  border-top-right-radius: 0;
  -moz-border-bottom-left-radius: 20px;
  border-bottom-left-radius: 20px;
  -moz-border-bottom-right-radius: 0;
  border-bottom-right-radius: 0;
  border-color: blue;
  background: red;
}
.side-nav li:hover span.short {
  display: none;
}
.side-nav li:hover span.long {
  display: block;
}
.side-nav a {
  position: relative;
  display: block;
  text-decoration: none;
  padding: 10px 0;
  text-align: center;
}

<nav id="side-nav" class="side-nav" role="navigation">
  <ul>
    <li><a href="#"><span class="short">S</span><span class="long">Long</span></a>
    </li>
    <li><a href="#"><span class="short">S</span><span class="long">Long</span></a>
    </li>
    <li><a href="#"><span class="short">S</span><span class="long">Long</span></a>
    </li>
    <li><a href="#"><span class="short">S</span><span class="long">Long</span></a>
    </li>
    <li><a href="#"><span class="short">S</span><span class="long">Long</span></a>
    </li>
  </ul>
</nav>

JSfiddle Demo