Width of animation from left to right (with text)

Question

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

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

In the script, you can see that when left-aligned (red), the text remains stationary, and the width animation aligns it to the right. It's good.

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

If I align everything correctly, the text remains anchored to the left of its element, and the width is deleted to the right (blue text block in the violin). This leads to a sliding effect, and not to the static “erase” effect that I want. This is not good.

If I align to the right, but use direction: rtl;(for example, a green example), the erase effect works correctly, but the contents of the elements are canceled. This is not good.

How can I align the text and get the width for deletion on the left (which makes the “erase” effect instead of the slide) without changing the order of the content? Basically, I need the same effect as when left-aligned (red), but mirrored (without mirroring the content elements).

Answer 1

I managed to get the desired effect using the flexible box display.

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

Using direction: rtlin conjunction with flex-direction: row-reversein a child, the list maintains the original order of the elements.

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

Try to add this.

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

Answer 4

I played the fiddle: https://jsfiddle.net/am87yhp9/

Do you want to achieve this effect?

Manipulate the Margin property and change direction from rtl → ltr.

JQ:

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