古怪的過渡行爲只

我已經寫了處理動畫燈箱事件如下：古怪的過渡行爲只

obj.css({ 
'transition':'transform 0.2s linear 0s', 
'transform':'perspective(1000px) rotateX(5deg) rotateY(0deg) rotate(10deg) skewX(0deg) skewY(0deg) translate(0px,0px) translateZ(0px)', 
'transform-style':'preserve-3d' 
});

，以保持它的簡單，我剝離出來的變量和供應商前綴。此代碼在我測試過的所有設備上都可以100％工作，並順利執行動畫。

但是，我在IE10中遇到了一個奇怪的問題。僅在Metro模式下（桌面模式IE10完美工作），動畫將跳轉...然後執行動畫...然後在完成時再跳轉。跳躍很微妙，大概在20-30px之間。我只是好奇，如果其他人在IE10之間經歷了城域模式和桌面模式之間的任何轉換差異，或者2之間的任何其他差異可能有助於解釋這種轉變？

代碼沒有錯誤，控制檯很清楚。

謝謝！

來源

2013-04-28 Aaron

你能提供[小提琴]（http://jsfiddle.net）嗎？ – Sampson 2013-04-28 15:37:56

我見過IE10做奇怪的事情，如果你申請的過渡，並在同一時間，改造，調試，你可以試試... ...

obj.css({'transition':'transform 0.2s linear 0s'}) 

setTimeout(function(){ 
    obj.css({ 
    'transform':'perspective(1000px) rotateX(5deg) rotateY(0deg) rotate(10deg) skewX(0deg) skewY(0deg) translate(0px,0px) translateZ(0px)', 
    'transform-style':'preserve-3d' 
    }); 
}, 10);

如果這不起作用，你可以試着與默認值...

obj.css({ 
'transition':'transform 0.2s linear 0s', 
'transform':'perspective(1000px) rotateX(0) rotateY(0) rotate(0) skewX(0deg) skewY(0deg) translate(0px,0px) translateZ(0px)' 
}) 

setTimeout(function(){ 
    obj.css({ 
    'transform':'perspective(1000px) rotateX(5deg) rotateY(0deg) rotate(10deg) skewX(0deg) skewY(0deg) translate(0px,0px) translateZ(0px)', 
    'transform-style':'preserve-3d' 
    }); 
}, 10);

此代碼是可怕的，當然，它只是爲了讓你發現問題可能在哪裏。

來源

2013-04-28 02:21:56 Duopixel

謝謝，我會玩一下。 IE10工作得很好，但我只在Metro模式下注意到這個問題。 – Aaron 2013-04-28 02:24:59

感謝您的努力，但我仍然遇到了IE10 Metro模式下的問題。以上所寫的內容實際上與我如何運行代碼類似。轉換和轉換在一起工作得很好 - 但只有在IE10桌面模式下：p希望會出現一些東西。謝謝！ – Aaron 2013-04-28 04:05:06

古怪的過渡行爲只

回答

相關問題