主页 / user-4743730

B45i's questions

Martin Hope
B45i
Asked: 2024-08-13 01:12:56 +0800 CST
  • 8

我正在尝试在下面的代码中为导航栏的宽度设置动画。

navbar当鼠标悬停在图标上时，图标的宽度应该会扩大，但我希望只有nav-title__text 变大，而图标的大小保持不变。然而，在动画过程中，SVG 图标会稍微向左移动。

是什么原因造成的？我该如何预防？

:root {
  font-family: sans-serif;
}

* {
  padding: 0;
  margin: 0;
}

body {
  height: 100vh;
  width: 100vw;
  background-color: #fff;
}

nav {
  height: 100%;
  background-color: #23232e;
  width: 4rem;
  transition: width 1s ease-in;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;

}

nav:hover {
  width: 10rem;
  color: white;
}

.nav-title {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-top: 1rem;
}

.nav-title>svg {
  height: 2rem;
  flex-grow: 0;
}

.nav-title__text {
  flex-grow: 0;
  overflow: hidden;
  width: 0;
}

nav:hover .nav-title__text {
  width: fit-content;
}
<nav>
  <div class="nav-title">
    <svg width="80" height="80" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#ff69b4" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5">
      <path d="M1.75 11 8 14.25 14.25 11M1.75 8 8 11.25 14.25 8M8 1.75 1.75 5 8 8.25 14.25 5z" /></svg>
    <div class="nav-title__text">
      Title
    </div>
  </div>

</nav>

html