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

Question

I have text content with a 'wipe'-like transition, using jQuery to animate element width. This works fine when anchored to the left, as width is removed from the right side.

See fiddle for simple example: https://jsfiddle.net/4jz7e0dw/5/

You can see in the fiddle, that when aligned left (red) the text stays still and the width animation trims it back from the right. This is good.

However, I now need this to work when aligned to the right.

If I align everything right, the text stays anchored to the left of its element, and width is removed from the right (blue text block in fiddle). This results in a sliding effect rather than the static 'wipe' effect I want. This is not good.

If I align to the right but use direction: rtl; (like the green example), the 'wipe' effect works correctly, but the content of the elements is reversed. This is not good.

How can I have text right aligned and get the width to remove from the left (making the 'wipe' effect instead of a slide), without reversing the content order? Basically I need the same effect as when aligned to the left (red), but mirrored (without mirroring content elements).

Answer 1

I was able to get the desired effect using a flex-box display.

Here is the fiddle: https://jsfiddle.net/4jz7e0dw/11/

By using direction: rtl in combination with flex-direction: row-reverse in the child, the list keeps the original order of elements.

Answer 2

A simple solution would be to put all of the content into a single <li> instead of seperate ones.

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

If for whatever reason you do need multiple items, another solution would be to simply reverse the order of the elements in your HTML

Answer 3

Try adding this

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

Answer 4

I forked a fiddle: https://jsfiddle.net/am87yhp9/

Is this the effect you want to achieve?

Manipulating the Margin property, and changing the direction from rtl -> ltr.

JQ:

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