刪除CSS轉換，移動元素，然後在再次移動元素之前重新應用它

我在左邊屬性上有一個轉換。我想從左側移動一個div：860px到-860px，而不進行轉換，然後將它移動到0px並進行轉換。

如果我刪除給元素轉換的類，應用一個給它左邊-860px的類，那很好。沒有過渡。

但是，由於我想在將左邊改爲0px之前應用一個轉換，我再次添加轉換類，並給它一個左邊的類：0.當我在Chrome中這樣做時，它將應用轉換在通往-860px位置的路上的元素以及爲0.因此，不是我想要的。

我想避免之間的延遲也。但我不認爲有一件事告訴我Chrome何時重新渲染了-860像素的元素。有任何想法嗎？

下面是一些示例代碼。具有轉換的類：

.div-transition { 
    -webkit-transition:all 0.8s ease-in-out; 
    -moz-transition:all 0.8s ease-in-out; 
    -o-transition:all 0.8s ease-in-out; 
    transition:all 0.8s ease-in-out; 
} 

$(".div-to-transition").removeClass('div-transition'); 
$(".div-to-transition").css('left', '-860px'); // So far so good, if I don't add the next two lines. 
$(".div-to-transition").addClass('div-transition'); 
$(".div-to-transition").css('left', '0'); // Now it applies a transition as we move left to -860px, AND from -860px to 0.

來源

2016-07-24 user2451412

分享一些代碼... –

如果您還需要jQuery，我想我只需使用'style.left'設置左邊的屬性，然後添加一個類，這樣您就不需要嘗試和檢測元素是否在-860px。添加一些代碼，如果這是你想嘗試，但堅持。 – Toby

@eskimo - 我已經添加了一些示例代碼。 – user2451412

只需重複該註釋：element.scrollWidth;此行後，chrome應該重新呈現該元素;沒有任何等待。或者如果鉻試圖變聰明，則可能爲element.getBoundingClientRect();;）

瞭解。使用某種副作用而非指令的預期目的總是有點可怕。我想我加了兩個以防其中一個在未來的版本中得到優化。

雖然它有點濫用，但它不那麼純粹的副作用，更多的是這些屬性的性質和CSS的本質的含義。

簡答長：您要求瀏覽器瞭解受應用樣式影響的節點屬性。現在，瀏覽器意識到它有待處理的樣式更改，它們會影響您要求的屬性，因此需要對它們進行評估。通過CSS中的級聯，幾乎每種樣式都可以以某種方式影響頁面上的幾乎每個節點。
例如，通過展開當前節點，以至於下面的節點滑入下一行，現在它也會影響它的風格，...並且不要忘記父節點及其後繼節點。

因此，不是試圖評估混亂，而是應用所有待定樣式（基本上意味着重新渲染整個頁面！），然後爲您提供您要求的值。

即使您沒有對此值做任何事情，而只是要求觸發整個機制。

由於它現在又有了一個穩定的狀態，瀏覽器可以爲您提供所有您想要的屬性而無需重新渲染，從而再次改變某個節點（或它的類）的樣式。
//只是說：scrollWidth不等於重新渲染整個頁面。

我首先想到的是簡單地認爲，鉻會 可能在某種程度上能夠評估你有沒有更改的影響維度的任何財產，節點，因此提供你一個答案，而不需要重新渲染整個頁面，但如前所述：在CSS的混亂中，這幾乎是不可能的。

所以，如果你想爲將來的安全，只使用getBoundingClientRect()，明確要求計算的位置和節點的計算的維度。

來源

2016-07-24 16:02:00 Thomas

刪除CSS轉換，移動元素，然後在再次移動元素之前重新應用它

回答

相關問題