2

更新: フィドルをセットアップしましたが、問題なく動作しているようです - 最初にスライドインするセクションには Google マップが含まれています - これが実際に問題なのだろうか...

最近、作業中の HTML5 アプリに -webkit-transform カード フリップを追加しました。これには、水平方向に移動する単純なカルーセルが奇妙な動作を示すという不幸な影響があります。

私のカルーセルはこのように構成されています

<div id="wrapper">
    <div id="sections">
        <section id="startPage" class="page">
            <div id="card">
                <div class="face front">
                    <p>Some content here</p>
                    <button id="flipFront">A label</button>
                </div>
                <div class="face back">
                    <p>Some content here</p>
                    <button id="flipBack">A label</button>
                </div>
            </div>
        </section>
        <section></section>
        <section></section>
    </div>
</div>

そして、それを循環する私の jQuery .click() 動作は次のとおりです。

$('#sections').stop().animate({"left": -($('#someDiv').position().left)}, 500);

カード フリップ用の -webkit-transform CSS を追加するまで、これは問題なく動作します。

#startPage {
    -webkit-perspective: 1000;
}

#card {
    height: 940px;
    width: 640px; 
    -webkit-transform-style: preserve-3d;
    -webkit-transition: 0.5s;
}

.back {
    -webkit-transform: rotateY(180deg);
    background-color:#000;
}

.rotated{
    -webkit-transform: rotateY(180deg);
}

.back, .front {
    height: 940px;
    width: 640px; 
}

.face {position: absolute;-webkit-backface-visibility: hidden;}

使用時にカードが正常に反転するようになりました

$('#setup, #back').click(function() {
    $('#card').toggleClass('rotated');
});

そして、私のカルーセルはまだ機能しますが、スタックしているようです-たとえば、部分的にスライドして、何らかの方法でdivと対話するまで所定の位置に留まり、その後正しい場所にスナップします.

問題は次のようです

-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;

それらを CSS から削除すると、カルーセルは正常に機能しますが、フリップは機能しません。

Safari と Chrome の両方でテストしましたが、結果は同じです。任意の考えをいただければ幸いです。

4

2 に答える 2

0

webkit 変換を行うだけで混乱する可能性があり、次のような情報を追加します

-webkit-transform: rotateY(180deg) scale(2);
-moz-transform: rotateY(180deg) scale(2);
-o-transform: rotateY(180deg) scale(2);
-ms-transform: rotateY(180deg) scale(2);

そのため、より多くのブラウザーでサポートされており、フォールバックがあります。これが問題であることを何度も見てきましたが、コードでテストしていないため、保証できません。

于 2012-04-20T08:29:07.757 に答える
0

animate() 関数は本質的に数値である値のみを受け入れるため、変換プロパティは jquery の animate() 関数では機能しません。例えば。数値 ("margin:30px" など)。

transform プロパティは、数値ではない値を取ります。

参照: http://www.w3schools.com/jquery/eff_animate.asp

ただし、「ステップ関数」を使用して、アニメーションで変換効果を実現するか、Transit プラグインを使用できます。 http://ricostacruz.com/jquery.transit/

お役に立てれば。

于 2016-10-26T11:56:39.957 に答える