css - 缩放时如何禁用 CSS3 过渡？

Question

当我在元素的宽度/高度或上/右/下/左上使用 CSS3 过渡，并使用 CTRL+ 调整页面缩放时， CTRL- 或 CTRL0，浏览器为这些属性的变化设置动画。

有没有一种方法可以使用这些过渡效果，但阻止浏览器仅在缩放时使用它们？

编辑:

示例 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

我想到了一种解决方法，即在按下 CTRL 时使用 Javascript 禁用转换。它处理上面列出的键盘快捷键，以及 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 中测试过。