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

我有一个类似'擦除'过渡的文本内容，使用jQuery来动画元素宽度。如果宽度从右侧移除，则在锚定到左侧时可以正常工作。动画从左到右的宽度（带文本）

为简单的例子见琴：https://jsfiddle.net/4jz7e0dw/5/

可以在小提琴看到，当左对齐（红色）的文本仍然保持和宽度动画修剪它的右后卫。这很好。

但是，我现在需要这个工作，当对齐到正确的。

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

如果我对齐右侧但使用direction: rtl;（如绿色示例），则“擦除”效果可正常工作，但元素的内容会颠倒过来。不是很好。

如何让文本右对齐并从左边取出宽度（使'擦除'效果而不是幻灯片），而不反转内容顺序？基本上我需要和左对齐（红色）相同的效果，但是镜像（没有镜像内容元素）。

来源

2017-10-18 t-jam

绿色块的工作，你想要什么？ –

@Mohit不，您会看到绿色区块中的文字内容被颠倒过来。宽度动画效果起作用，但内容顺序需要保持不变。 –

我能使用柔性盒显示器获得理想的效果。

这里是小提琴：https://jsfiddle.net/4jz7e0dw/11/

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

来源

2017-10-18 09:36:58 Rbla3066

图例。我为什么不考虑flex？谢谢。现在看看这是如何工作在一个3层深的ul列表... –

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

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

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

来源

2017-10-18 08:12:47 NanoBob

干杯，尽管我需要有许多文本元素，因为他们需要其他功能的附加数据属性，并且它们通过PHP循环添加。即使在p元素中使用跨度也会导致RTL出现一些奇怪的行为。颠倒HTML是我迄今为止唯一找到的解决方案，但它并不理想，因为列表是多层次的，我非常喜欢保持HTML清晰和合乎逻辑。希望有人有JS/CSS解决方案。 –

尝试添加该

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

来源

2017-10-18 09:16:14 Cons7an7ine

谢谢，但它在小提琴上没有任何区别... –

https://jsfiddle.net/4jz7e0dw/12/ - 你使用什么浏览器/版本？ – Cons7an7ine

目前在iOS上，尝试过Chrome和Safari，没有变化。你呢？ –

我分叉小提琴：https://jsfiddle.net/am87yhp9/

这是你想达到什么效果？

操纵边距属性，并从rtl→ltr改变方向。

JQ：

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

来源

2017-10-18 09:46:29 fntstk

谢谢，但不是我想要实现的;这有效地为原始左对齐效果添加了左边距。我希望镜像效果。 Rbla3066很好地工作。 –

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

回答

相关问题