Question

我有一个很小的菜单列表，当鼠标靠近时，菜单列表应该会增加。菜单在其原始状态下是右对齐的，在悬停时，第二个项目向右移动并向左对齐，以为增加的高度腾出空间（请参见JSFiddle）。

ul {
  font-size: 12px;
  transition: font-size ease 0.4s 0.4s;
  line-height: 12px;
  text-align: right;
  padding: 50px;  
  width: 500px;
  list-style-type: none;  
}

ul:hover {
  font-size: 24px;
}

li {
  height: 12px;
}

li a {
  display: block;
    text-decoration: none;
  transition: transform ease 0.8s;
  text-align: right;
}

.container:hover ul li:nth-child(even) a{
  transform: translateX(100%);
  text-align: left;
}

<div class="container">
  <ul>
    <li><a href="#">Some link</a></li>
    <li><a href="#">Some other link</a></li>
    <li><a href="#">another</a></li>
    <li><a href="#">this is the last ling</a></li>
  </ul>
</div>

到目前为止，该概念仍然有效，尽管我将不得不微调其中的动画部分。我找不到解决方案的问题是：要在中间对齐项目，我必须更改text-align-但这不能设置动画，因此在悬停时，项目会在开始移动之前跳到左对齐。我希望他们从他们的当前位置开始。

要解决此问题，我想我需要一种方法来使项目保持正确对齐，并仅按其宽度向右移动它们：transform: translateX(self:width);但我似乎无法弄清楚该怎么做没有javascript。

Answer 1

测试！

li {
  height: var(--menu-lineheight);
  margin-right: 50%;
  display: flex;
  justify-content: flex-end;
}

动画：将右对齐的文本移到右侧，然后左对齐

1 个答案: