Javascript 从左到右设置宽度动画（使用文本）

我有一个类似于“擦除”的过渡的文本内容，使用jQuery设置元素宽度的动画。当锚定到左侧时，这可以很好地工作，因为宽度已从右侧移除

有关简单示例，请参见fiddle：

您可以在小提琴中看到，当左对齐（红色）时，文本保持静止，宽度动画从右侧将其修剪回来。这很好

但是，我现在需要在与右侧对齐时使其工作

如果将所有内容向右对齐，文本将固定在其元素的左侧，而宽度将从右侧移除（小提琴中的蓝色文本块）。这会产生滑动效果，而不是我想要的静态“擦除”效果。这不好

如果我向右对齐，但使用

方向：rtl（如绿色示例），“擦除”效果正常工作，但元素的内容相反。这不好

如何使文本右对齐并从左侧移除宽度（使“擦除”效果而不是幻灯片），而不反转内容顺序？基本上，我需要与左侧对齐（红色）时相同的效果，但需要镜像（没有镜像内容元素）。
一个简单的解决方案是将所有内容放在一个
中，而不是分开

<div class="container slide-right rtl">
  <ul id="target3" class="slide">
  <li>CLICK THIS TO DEMO</li>
  </ul>
</div>



单击此按钮进行演示


如果出于任何原因需要多个项目，另一种解决方案是简单地颠倒HTML中元素的顺序

.slide {
...
unicode-bidi: plaintext;
}

我能够使用flex box显示器获得所需的效果

这是小提琴：

通过在子元素中使用
方向：rtl
和
灵活方向：行反转
，列表将保持元素的原始顺序。
我分叉了一把小提琴：

这就是你想要达到的效果吗

操纵边距属性，并从rtl->ltr更改方向

JQ:

绿色块可以正常工作？@Mohit否，您将看到文本内容在绿色块中反转。宽度动画效果有效，但内容顺序需要保持不变。干杯，尽管我需要有许多文本元素，因为它们需要其他功能的附加数据属性，并且它们是通过PHP循环添加的。即使在p元素中使用跨距，也会导致RTL出现一些奇怪的行为。到目前为止，反转HTML是我找到的唯一解决方案，尽管它并不理想，因为列表是多层的，而且我非常喜欢保持HTML的干净性和逻辑性。希望有人有一个JS/CSS解决方案您使用的浏览器/版本是什么？目前在iOS上，尝试了Chrome和Safari，没有更改。你呢？你访问评论中的链接了吗？我的将覆盖
rtl
，并显示单击此按钮演示，就像在注释中使用小提琴一样。您使用的浏览器和操作系统是什么？Chrome。我在Windows10和Android手机上都试过了。奇怪的传说。为什么我没有想到flex？！谢谢现在来看看这是如何在一个3级的深度ul列表上工作的…谢谢，但不是我想要实现的；这将有效地为原始左对齐效果添加左边距。我想把效果反映出来。Rbla3066运行良好。
jQuery('.slide').click(function(){
    var width = this.clientWidth;
    $(this).animate({ 'width': 0, "marginRight": width}, 1500);
 });