css - 动画 : move right aligned text to the right and align left

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;
}