7

PhoneGapを使用してiOSアプリを構築しています。translate3dcSSアニメーションを使用して「フリップ」効果を作成しています。

これは、より単純な要素でうまく機能します...フロント/バックdivとおそらく余分なスパンを持つDIV。

しかし、より大きな要素、つまり画面全体を反転しようとすると、再描画の不具合が発生します。cssクラスを交換して遷移を開始するとすぐに何が起こりますか？「bottom」divの一部が「top」divをポップスルーし、次にフリップが発生し、その後再びポップアウトします。そして、透けて見えるのは要素全体ではありません...私が3D回転を変換しているのは、軸に沿って分割された要素の半分です。

これを引き起こしている可能性があるものについてのアイデアや理論はありますか？これは、アプリとしてのiPadとSafariのデスクトップの両方で同じように発生するため、Webkitの問題のようです。

それはいくつかのCSSの問題でしょうか？または、Safariが処理できる以上の大きな背景画像を持つ複雑なネストされた要素を使用してフルスクリーンのtranslate3d回転を実行しようとしていますか？

更新1：

問題の絞り込みは進んでいます。

何が起こっているのかというと、translate3dフリップを実行するときに「覗き見」している要素は、以前にtranslate3dを介して配置されていた子要素であるということです。

translate3dで移行したい「ページ」構造：

<div id="frontbackwrapper">
    <div id="front">    
    </div><!--/front-->
    <div id="back">  
    </div><!--/back-->
</div><!--/frontbackwrapper-->

これはそれ自体で機能します。フロントdivは、カードフリップ効果のあるバックdivに置き換えられます。

#front問題は、ページ全体をめくる前に、 translate3dを使用してdiv内のいくつかの要素をアニメーション化したことです。

<div id="frontbackwrapper">
    <div id="front">  

        <div class="modal"></div>  

    </div><!--/front-->
    <div id="back">  
    </div><!--/back-->
</div><!--/frontbackwrapper-->

CSSの例：

.modal {
    width: 800px;
    height: 568px;
    position: absolute; 
    left: 112px;
    z-index: 100;
    -webkit-transition-duration: 1s;
    -webkit-transform: translate3d(0,-618px,0); /* set off screen by default */
 }
.modal.modalOn {
    -webkit-transform: translate3d(0,80px,0); /* slides the div into place */
 }

translate3dを使用する代わりに、divをtopスタイルで再配置するか、topプロパティを変換するだけの場合、ピークスルーの問題は発生しません。もちろん、それは私がそれぞれ滑らかなアニメーションまたはハードウェアアクセラレーションをあきらめなければならないことを意味します。

この時点では、Webkitのバグのようです。これからも遊んでいきます。誰かが以前にこれに遭遇し、回避策を見つけた場合、私はすべての耳です！

4

2 に答える 2

6

解決！夜の睡眠の後、私は犯人とそれをどうするかについて熟考しました。これは、必ずしもtranslate3dを使用して子要素をアニメーション化する動作ではなく、変換された要素が、その親がtranslate3dを使用してアニメーション化されているときにCSSプロパティを持っている面です。

修正は、最初に子要素をアニメーション化し、次に変換スタイルをすべて一緒に削除することです。

CSS構造は次のようになります。

/* default class for the start of your element */
.modal-startposition {
  -webkit-transition-duration: 1s;
  -webkit-transform: translate3d(0,-618px,0);
  }

/* add this class via jQuery to then allow
   webkit to animate the element into position */
.modal-animateposition {
  -webkit-transform: translate3d(0,80px,0);
}

/* when animation is done, remove the above class
   and replace it with this */
.modal-endposition {
  top: 80px;
}

そして、いくつかのサンプルjQuery：

//[attach a click event to trigger and then...]
$myModal
    .addClass("modal-animateposition")
    .on('webkitTransitionEnd',function () {
         $myModal
            .removeClass('modal-startposition')
            .removeClass('modal-animateposition')
            .addClass('modal-endposition');
    });

少し面倒ですが、画面の再描画の問題を完全に修正します。

編集：タイプミスを修正しました

于 2011-07-07T14:32:20.680 に答える
2

DA、私はこれから何かを学びました、ありがとう。また、css属性の「translate3d」と「left」にも注意してください。翻訳と配置は少し異なります。テストして、要素をx軸で100ピクセル変換し、「左」スタイル属性を0ピクセルに設定します。確認します。現在の移動ポイントからx軸の0pxに配置されます（x軸の100pxから開始）。

これにより、ドラッグアンドドロップおよびアニメーションアルゴリズムで数学的エラーが発生し、簡単に気付くことができ（再描画グリッチ、スキップ、位置のリセット）、translate3dが要素offsetLeftまたは'left'スタイル属性を更新しなくなったため（最適化のためにリフローを防ぐため）、課題になります。 ）、つまり、要素を実際に左に解析することは、translate3dまたはleftが使用されていたかどうかを知ることに基づいています。ゲーム開発者の場合、内部変数のx、yを追跡することは、要素の位置との同期を維持する方法です。それがもっと役立つことを願っています。

于 2012-12-03T14:04:01.500 に答える