1

当我在元素的宽度/高度或上/右/下/左上使用 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上找到。

4

2 回答 2

0

我想到了一种解决方法，它使用 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 中测试过。

于 2013-04-16T04:53:22.160 回答
0

试试这个解决方案：

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-12T17:13:06.513 回答