動畫從左到右的寬度（帶文本）

我有一個類似'擦除'過渡的文本內容，使用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很好地工作。 –

動畫從左到右的寬度（帶文本）

回答

相關問題