在悬停时使用过渡时如何使元素保持原位

Question

如何使 li 元素在使用 :hover 应用过渡时不四处移动？圆圈是通过将高度和边界半径应用于 li 元素而制成的。我试过将 ul 容器变大，但似乎没有用。谢谢你的帮助。

代码：

 body {}
    main {
      display: flex;
      background: #eeeeee;
      min-height: 100vh;
      padding: 1em;
      
    }

    h1 {
      font-family: arial;
      font-size: 1.4em;
      padding-left: 1em;
    }

    ul {
      padding-top:50px;
      min-height: 600px;
      position:relative;

    }

    li {
      position:relative;
      background-color: purple;
      border-radius: 50%;
      width: 50px;
      height: 50px;
      padding: 1em;
      text-align: center;
      list-style: none;
      display: inline-block;
      line-height: 50px;
      border: 5px solid red;
      margin-right: -1em;
      z-index: 0;
      transition: width 0.5s, height 0.5s, background-color 1s, line-height 0.5s;
      
    }

    li:hover {
      display: inline-block;
      position:relative;
      width: 90px;
      height: 90px;
      z-index: 10;
      background-color: green;
      line-height: 90px;
    }

<body>
  <main>
    <h1>
      My animated Menu
    </h1>
    <div class="menu">
      <ul>
        <li>X</li>
        <li>Y</li>
        <li>Z</li>
      </ul>
    </div>
  </main>
</body>

Answer 1

使用CSS3 transforms，这样元素可以自由移动或缩放到DOM而不影响布局大小。

一个不错的好处：动画在 fps 方面会更有效率，因为不会在每一帧上重新计算布局（将使用 GPU）

ul {
  padding-top: 50px;
}

li {
  background-color: purple;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  padding: 1em;
  text-align: center;
  list-style: none;
  display: inline-block;
  line-height: 50px;
  border: 5px solid red;
  margin-right: -1em;
  z-index: 0;
  transition: transform 0.5s, background-color 1s;
}

li:hover {
  display: inline-block;
  position: relative;
  transform: scale(1.5);
  z-index: 10;
  background-color: green;
}

<div class="menu">
  <ul>
    <li>X</li>
    <li>Y</li>
    <li>Z</li>
  </ul>
</div>

在悬停时使用过渡时如何使元素保持原位

How to make elements stay in place when using transitions on hover

css

css-transitions