0

jQueryを介してサイズ変更できる人物の写真を表示するページがあります。選択/ホバーすると変化する3つの正方形を表示するスプライト画像を使用しています。CSS3 Transition＆Transform（RotateY）を使用して変更をアニメーション化しています。移行と変換はChrome（v22）で機能しますが、Firefox（v16）では機能しません。

jsFiddleの例を作成しました：http：//jsfiddle.net/WPEbW/7/

<div id="divOptions" runat="server" style="padding: 0 10px; margin: 10px; overflow: hidden; zoom: 1">
    <div style="float: left">
        <div id="divSmallImage" runat="server" class="ResizeImages Small" title="Small">
        </div>
        <div id="divMediumImage" runat="server" class="ResizeImages Medium Selected" title="Medium">
        </div>
        <div id="divLargeImage" runat="server" class="ResizeImages Large" title="Large">
        </div>
    </div>
</div>​

.ResizeImages { cursor: pointer; display: inline-block; background-position: 0; -moz-transform:rotateY(0deg) }
.ResizeImages:hover { box-shadow: #CCC 1px 1px 5px; -webkit-transition: none; -moz-transition: none; -o-transition: none; transition: none; }
.ResizeImages.Selected { -webkit-transition: background-position 0 .4s,-webkit-transform 1s; -webkit-transform: rotateY(180deg); -moz-transition: background-position 0 .4s,-moz-transform 1s; -moz-transform: rotateY(180deg); -o-transition: background-position 0 .4s,-o-transform 1s; -o-transform: rotateY(180deg); transition: background-position 0 .4s,transform 1s; transform: rotateY(180deg); }
.ResizeImages.Small { background: url('https://www.new-innov.com/RMSImages/square_sprite.png') 0 0 no-repeat; width: 12px; height: 12px; }
.ResizeImages.Small:hover { background-position: 0 -12px; }
.ResizeImages.Small.Selected { background-position: 0 -24px; }
.ResizeImages.Medium { background: url('https://www.new-innov.com/RMSImages/square_sprite.png') -12px 0 no-repeat; width: 16px; height: 16px; }
.ResizeImages.Medium:hover { background-position: -12px -16px; }
.ResizeImages.Medium.Selected { background-position: -12px -32px; }
.ResizeImages.Large { background: url('https://www.new-innov.com/RMSImages/square_sprite.png') -28px 0 no-repeat; width: 20px; height: 20px; }
.ResizeImages.Large:hover { background-position: -28px -20px; }
.ResizeImages.Large.Selected { background-position: -28px -40px; }

$(document).ready(function() {
    function SetSize(selectedImage) {
        if (typeof selectedImage !== 'undefined') {
            $('.ResizeImages.Selected').removeClass('Selected');
            $(selectedImage).addClass('Selected');
        }
    }
    SetSize();
    $('.ResizeImages').click(function() {
        SetSize(this);
    });
});​

私が使用しているトランジションとトランスフォームはFirefoxで機能するはずですが、なぜ機能しないのかわかりません。

よろしくお願いします、-
アーロン

4

2 に答える 2

3

background-position 0 .4shttp://dev.w3.org/csswg/css3-transitions/#single-transition<single-transition>で定義されているように有効ではないため、ルール全体がCSSパーサーによって破棄されます。エラーコンソールが言うように：-moz-transition

[03：47：02.876]'-moz-transition'の値の解析中にエラーが発生しました。宣言は削除されました。@ http://fiddle.jshell.net/WPEbW/7/show/:18

残念ながら、Chromeは遷移値を正しく解析するための仕様を実際に実装していないため、Chromeで機能します。

于 2012-11-03T07:47:57.877 に答える
0

@Boris Zbarskyのおかげで、私は自分の問題を解決することができました。クラスの短縮版を使用する代わりに、トランジションを詳しく説明しました。

jsFiddleの例を更新しました：http：//jsfiddle.net/WPEbW/10/

これが私が変更した唯一のクラスであるcssです： 

.ResizeImages.Selected { 
    -webkit-transition-property: background-position, -webkit-transform;
    -webkit-transition-duration: 0s, 1s;
    -webkit-transition-delay: .4s, 0s;
    -webkit-transform: rotateY(180deg); 
    -moz-transition-property: background-position, -moz-transform;
    -moz-transition-duration: 0s, 1s;
    -moz-transition-delay: .4s, 0s;
    -moz-transform: rotateY(180deg); 
    -o-transition-property: background-position, -o-transform;
    -o-transition-duration: 0s, 1s;
    -o-transition-delay: .4s, 0s;
    -o-transform: rotateY(180deg); 
    transition-property: background-position, transform;
    transition-duration: 0s, 1s;
    transition-delay: .4s, 0s;
    transform: rotateY(180deg); 
}
于 2012-11-05T15:03:08.480 に答える