javascript - 拖动时如何使元素动画？滑动菜单？

Question

我的想法是我有一个由 3 个元素组成的“轮播”，由箭头键控制。当我用箭头向左/向右移动时，我的 3 个元素（它们是文本块）将向左或向右移动，并被一个框剪掉，这样它们就不会离开屏幕，而是像这样被屏蔽：

滚动之前 -

滚动后-

为此，我设置了箭头键来增加一个数字，控制一次打开哪个 li 元素：

  if(event.key == "ArrowRight")
    {
      if(this.midMenuIndex < 2)
      {
        this.midMenuIndex++;
      }
    } else if (event.key == "ArrowLeft")
    {
      if(this.midMenuIndex > 0)
      {
        this.midMenuIndex--;
      }
    } 

HTML：

<ul class = "menuText">
    <li>first</li>
    <li>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in augue sed nibh mollis sodales at in velit. Maecenas ullamcorper mollis posuere.
    </li>
    <li> 3rd </li>
</ul>

对于剪辑，我尝试过：clip-path: inset(10px 20px 30px 40px);

哪个确实有效，但似乎如果我移动一里，文本就会全部被压扁，并且不会无缝地被掩盖。为了缓和我想使用https://visionmedia.github.io/move.js/来移动 li 元素，但不确定与递增数字协调完成此滚动的最有效方法。

剪辑路径是正确的方法还是其他方法？

标签： javascriptjqueryhtmlcss