Question

我的文字内容采用“擦拭”式转换，使用jQuery为元素宽度设置动画。当锚定在左侧时，这可以正常工作，因为宽度从右侧移除。

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

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

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

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

如何才能将文字右对齐并从左侧移除宽度（使用＆＃39;擦除＆＃39;效果而不是幻灯片），而不撤消内容顺序？基本上我需要与左对齐（红色）时相同的效果，但镜像（不镜像内容元素）。

Answer 1

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

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

Answer 2

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

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

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

Answer 3

尝试添加此

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

Answer 4

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

操纵边距属性，并改变rtl的方向 - ＆gt; LTR。

JQ：

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