爲什麼不這個CSS轉換完成它的移動懸停

我有這個按鈕來做懸停轉換。但不知何故，它有時並未完成其轉換。它走到一半，然後停下來或卡在那裏。一旦它被徘徊，我怎樣才能迫使它徹底完成它的轉換？爲什麼不這個CSS轉換完成它的移動懸停

div.shuffle { 
 
    background-image: url(https://goo.gl/PydgT2); 
 
    background-color: transparent; 
 
    width: 32px; 
 
    height: 32px; 
 
    transition: all 0.3s linear; 
 
} 
 
div.shuffle:hover { 
 
    transform: rotateX(180deg); 
 
    -webkit-transform: rotateX(180deg); 
 
}

<div class="shuffle" style="background-color: transparent;"></div>

任何想法解決它？

下面是一個例子：注意過渡類型如何卡在中途。我意識到只有當它已經被徘徊並且光標正在移動時纔會發生。

來源

2016-01-23 TheGuy

堆棧中的片段演示工作正常。你在這裏也看到同樣的問題嗎？ – charlietfl

@charlietfl感謝您的評論。是的，它也有問題。試着移動光標，然後你會看到圖標在中間停留一秒鐘，然後它回到正常位置。 – TheGuy

什麼瀏覽器？... – charlietfl

你們看到的是預期的行爲，因爲當你的元素上使用rotateX因爲該元素被旋轉，它的邊界開始收縮（邊界不完全收縮，但其在畫布上的投影，這就是我們所看到的輸出，縮小）。因此，當您繼續移動鼠標時，有時鼠標實際上會位於元素的當前邊界之外。我在下面的代碼片段的元素中添加了一個邊框，以便您查看正在發生的事情。

當鼠標靜止時，您看不到問題，因爲只有在移動鼠標時，UA纔會觸發懸停輸入/輸出事件。當元素的邊界發生變化時，它不會觸發事件，因爲這樣會產生很多開銷。

div.shuffle { 
 
    background-image: url(https://goo.gl/PydgT2); 
 
    background-color: transparent; 
 
    width: 32px; 
 
    height: 32px; 
 
    border: 1px solid; 
 
    transition: all 0.3s linear; 
 
} 
 

 
div.shuffle:hover { 
 
    transform: rotateX(180deg); 
 
    -webkit-transform: rotateX(180deg); 
 
}

<div class="shuffle" style="background-color: transparent;"></div>

溶液實際上是把hover選擇器，是沒有得到旋轉的元件上。您可以使用單獨的包裝元素或將background-image移動到僞元素。

注：即使在這裏，如果你在進出div的鼠標移動迅速，效果一樣會發生，因爲一旦你懸停時，選擇不再適用，因此該元素將轉回到其正常州。

div.shuffle { 
 
    position: relative; 
 
    background-color: transparent; 
 
    width: 32px; 
 
    height: 32px; 
 
    border: 1px solid; 
 
    transition: all 0.3s linear; 
 
} 
 
div.shuffle:after { 
 
    position: absolute; 
 
    content: ''; 
 
    height: 100%; 
 
    width: 100%; 
 
    background-image: url(https://goo.gl/PydgT2); 
 
    transition: all 0.3s linear; 
 
} 
 
div.shuffle:hover:after { 
 
    transform: rotateX(180deg); 
 
    -webkit-transform: rotateX(180deg); 
 
}

<div class="shuffle" style="background-color: transparent;"></div>

來源

2016-01-23 05:41:44 Harry

爲什麼不這個CSS轉換完成它的移動懸停

回答

相關問題