如何在縮放時禁用CSS3轉換？

當我使用上的元件的寬度/高度或頂部CSS3過渡/右/底/左，我調整使用CTRL+，CTRL頁面縮放 -或CTRL ，瀏覽器會動態改變這些屬性。如何在縮放時禁用CSS3轉換？

有沒有辦法使用這些轉換，但阻止瀏覽器僅在縮放時使用它們？

編輯：

樣本HTML：

<div></div>

樣品CSS：

div { 
    background:red; 
    height:200px; 
    width:200px; 
    -moz-transition:1s; 
    -webkit-transition:1s; 
    transition:1s; 
} 

div:hover { 
    height:300px; 
    width:300px; 
}

代碼也jsFiddle可用。

來源

2013-04-14 Vaughan

我想到了一個解決方法，它使用Javascript來禁用轉換，而按下CTRL。它處理上面列出的鍵盤快捷鍵，以及CTRL +滾輪，但僅當文檔具有焦點時。

它無法處理使用菜單啓動的縮放，但它總比沒有好。

HTML

<div></div>

CSS：

div { 
    background:red; 
    height:200px; 
    width:200px; 
    -moz-transition:1s; 
    -webkit-transition:1s; 
    transition:1s; 
} 

div:hover { 
    height:300px; 
    width:300px; 
} 

.zooming { 
    -moz-transition:0s; 
    -webkit-transition:0s; 
    transition:0s; 
}

的jQuery：

$(document) 
.keydown(function(e) { if (e.ctrlKey) { $('div').addClass('zooming'); }}) 
.keyup(function(e) { $('div').removeClass('zooming'); });

更新jsFiddle。目前只在Chrome中進行測試。

來源

2013-04-16 04:53:22 Vaughan

嘗試這種解決方案：

http://jsfiddle.net/995zE/

它通過加入過渡的CSS當你點擊的按鈕，當你縮放瀏覽器窗口，它會刪除該CSS。

這適用於Firefox，Chrome和IE 10.在Firefox和IE上，當您縮放時，過渡將像平常一樣繼續，縮放不會影響它。在Chrome上，轉換快速轉到最終狀態。

HTML：

<button id="decrease_width">- width</button> 
<button id="increase_width">+ width</button> 
<div id="test"></div>

CSS：

div#test 
{ 
    width: 100px; 
    height: 100px; 
    border: 1px solid red; 
} 

div#test.transition 
{ 
    transition: width 2s ease; 
    -webkit-transition: width 2s ease; 
    -moz-transition: width 2s ease; 
    -o-transition: width 2s ease; 
}

的JavaScript：

var transition_class = 'transition'; 

var $test = jQuery('#test'); 

function transition_test(width) { 
    $test.addClass(transition_class).css('width', $test.width() + width); 
} 

jQuery("#decrease_width").click(function() { 
    transition_test(-50); 
}); 

jQuery("#increase_width").click(function() { 
    transition_test(50); 
}); 

jQuery(window).resize(function() { 
    $test.removeClass(transition_class); 
});

來源

2013-12-12 17:13:06 daniel1426

如何在縮放時禁用CSS3轉換？

回答

相關問題