Как отключить переходы CSS3 при масштабировании?

Question

При использовании CSS3 переходов на элемент по ширине/высоте или сверху/справа/снизу/слева, и я настроить масштаб страницы, используя CTRL+, CTRL- или CTRL , браузер активирует изменение этих атрибутов.

Есть ли способ использовать эти переходы, но не позволяет браузеру использовать их только при масштабировании?

EDIT:

Пример 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.

Answer 1

Я думал об обходном пути, который использует Javascript для отключения перехода, в то время как CTRL нажимается. Он обрабатывает приведенные выше сочетания клавиш, а также CTRL + scrollwheel, но только в том случае, если документ имеет фокус.

Он не может обрабатывать масштабирование, инициированное с помощью меню, но лучше, чем ничего.

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 до сих пор.

Answer 2

Попробуйте это решение:

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); 
});