动画宽度从左到右（带文字）答案

【问题标题】：Animate width from left to right (with text)动画宽度从左到右（带文字）
【发布时间】：2017-10-18 07:25:48
【问题描述】：

我的文本内容带有类似“擦除”的过渡，使用 jQuery 为元素宽度设置动画。这在锚定到左侧时效果很好，因为宽度从右侧移除。

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

但是，我现在需要它在向右对齐时才能工作。

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

如果我向右对齐但使用direction: rtl;（如绿色示例），“擦除”效果可以正常工作，但元素的内容是相反的。这不好。

如何在不颠倒内容顺序的情况下使文本右对齐并获得要从左侧移除的宽度（制作“擦除”效果而不是幻灯片）？基本上我需要与左对齐（红色）相同的效果，但是镜像（不镜像内容元素）。

【问题讨论】：

【解决方案1】：

我能够使用弹性盒显示获得所需的效果。

通过在子级中使用direction: rtl 与flex-direction: row-reverse 组合，列表保持元素的原始顺序。

【讨论】：

【解决方案2】：

一个简单的解决方案是将所有内容放入单个 <li> 而不是单独的。

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

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

【讨论】：

干杯，虽然我需要大量的文本元素，因为它们需要用于其他功能的附加数据属性，并且它们是通过 PHP 循环添加的。即使在 p 元素中使用 span 也会导致 RTL 出现一些奇怪的行为。到目前为止，反转 HTML 是我发现的唯一解决方案，尽管它并不理想，因为列表是多层的，而且我喜欢保持 HTML 干净和合乎逻辑。希望有人有 JS/CSS 解决方案。

【解决方案3】：

尝试添加这个

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

【讨论】：

【解决方案4】：

我叉了一个小提琴：https://jsfiddle.net/am87yhp9/

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

操作 Margin 属性，并从 rtl -> ltr 更改方向。

JQ：

jQuery('.slide').click(function(){
    var width = this.clientWidth;
    $(this).animate({ 'width': 0, "marginRight": width}, 1500);
 });

【讨论】：