Question

当我在元素的宽度/高度或顶部/右侧/底部/左侧使用CSS3过渡时，我使用 CTRL + 调整页面缩放， CTRL - 或 CTRL 0 ，浏览器会动画对这些属性的更改。

有没有办法使用这些转换，但阻止浏览器仅在缩放时使用它们？

编辑：

示例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 + 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);
});

如何在缩放时禁用CSS3过渡？

2 个答案: