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

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でのみテストされています。

于 2013-04-16T04:53:22.160 に答える