How to disable CSS3 transitions when zooming?

问题

When I use CSS3 transitions on an element's width/height or top/right/bottom/left, and I adjust the page zoom using CTRL+, CTRL- or CTRL0, the browser animates the change to these attributes.

Is there a way to use these transitions, but prevent the browser from using them only when zooming?

EDIT:

Sample HTML:

<div></div>

Sample CSS:

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

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

Code also available on jsFiddle.

回答1:

I've thought of a workaround that uses Javascript to disable the transition while CTRL is being pressed. It handles the keyboard shortcuts listed above, as well as CTRL+scrollwheel, but only when the document has focus.

It can't handle zooming initiated by using the menu, but its better than nothing.

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

Updated jsFiddle. Only tested in Chrome so far.

回答2:

Try this solution:

http://jsfiddle.net/995zE/

It works by adding the transition css when you click the buttons, and when you zoom the browser window, it removes that css.

This works on Firefox, Chrome, and IE 10. On Firefox and IE, when you zoom, the transition continues as normal, and the zooming doesn't affect it. On Chrome, the transition fast-forwards to its final state.

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

来源：https://stackoverflow.com/questions/16004990/how-to-disable-css3-transitions-when-zooming

标签

css3