在使用css轉換問題之前使用jquery定義css屬性

我發現在初始設置爲auto時，使用css轉換屬性似乎存在問題。爲了避免這種情況，我使用jquery設置了最初的css屬性，然後添加了css transition屬性。在使用css轉換問題之前使用jquery定義css屬性

我遇到的問題是，當我設置初始css屬性後立即定義過渡屬性，我得到奇怪的行爲。 例如：http://jsfiddle.net/3zUDc/10/

但是，當我延遲設置過渡屬性幾毫秒，我得到預期的行爲，但代碼似乎更醜。 示例：http://jsfiddle.net/3zUDc/9/

有沒有辦法在第二個示例中看到的行爲沒有將css轉換和目標參數放入setTimeout塊中？

感謝您的幫助！

來源

2012-06-27 Tuck

+1不錯的例子...急於知道答案... – Wazzzy

@Tuck你有沒有試過$（'a：first'）。show（）。css（？ –

）''''show（'''）。 .. @AlexBall – Wazzzy

.show()一個答案......

$('a:first').click(function(){ 
    $(this).css({'width': $(this).width()/$(this).parent().width() * 100 + '%', 'height': $(this).height()}); 
    $('a:first').show().css({ 
     '-webkit-transition': 'all 3s', 
     '-moz-transition': 'all 3s', 
     width: '100%', 
     height: '100px', 
     backgroundColor: 'black' 
    }); 
});

這裏是jsfiddle demo

來源

2012-06-27 15:51:04 Wazzzy

您可以添加.css('left')到你的CSS聲明的末尾：http://jsfiddle.net/YDt7G/

之所以這工作（或不起作用）是因爲瀏覽器的JavaScript引擎優化了更改DOM的代碼。所以它不會在每行代碼後立即更新DOM，並且基本上將所有代碼放入一個DOM更新中。

添加.css('left')強制瀏覽器的JavaScript引擎查看DOM，並轉而預先更新DOM。

來源

2014-05-20 15:59:05

在使用css轉換問題之前使用jquery定義css屬性

回答

相關問題