动画：将右对齐的文本向右移动并左对齐答案

【问题标题】：animation: move right aligned text to the right and align left动画：将右对齐的文本向右移动并左对齐
【发布时间】：2019-11-17 08:33:38
【问题描述】：

我有一个很小的菜单列表，当鼠标靠近时应该会增长。在其原始状态下，菜单是右对齐的，悬停时每隔一个项目向右移动并左对齐，以便为增加的高度腾出空间（请参阅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。

【问题讨论】：

标签： css css-animations

【解决方案1】：

测试一下！

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

【讨论】：