1

注：最初に私のコメントを読んでください。

私はiPad固有のWebアプリを構築しています。リンクがクリックされたときにウィンドウにコンテンツをオーバーレイするために fancybox を使用していますが、私の問題は fancybox に固有のものではないと思います。

オーバーレイを表示してから、フルスクリーンにアニメーション化しようとしています (位置とサイズを変更しています)。アクセラレーションを得るために、ボックスから出てくる従来のアニメーションではなく、css3 トランスフォームを使用してファンシーボックス トランジションを作成しようとしています。私はほとんどそこにいますが、奇妙な問題に遭遇しています...

変換を適用してオーバーレイの高さを変更すると、ビューポートが変更され、ズームアウトします。ボックスの高さをどのようなサイズに変更しても、ビューポートはズームアウトします (ボックスを大きくするほど、ビューポートはズームアウトします)。メタタグを使用しています: . 奇妙なことは、これが幅で起こらないことです。オーバーレイの幅は画面全体の幅にうまく変換され、ビューポートは変更されません。高さと一緒です。

何か案は？私は単純なものが欠けていると確信しています。

それが役立つ場合に備えて、ここにいくつかのコードがあります。注: ファンシーブック ライブラリにいくつかの変更を加えたので、下に奇妙なものがある場合は、それが理由です。私が言ったように、これは Fancybox とは何の関係もないと思います。私が苦労しているのはモバイル Safari です。

トランジション：

var F = $.fancybox;

F.transitions.fullScreen = function() {
var cssProps = F._getPosition(true);
cssProps.top = parseInt(cssProps.top, 10) + 'px';
cssProps.opacity = 1;

// set the wrapper to its starting point and show it
F.wrap.css(cssProps).show(); 
$(".fancybox-inner").css({width:cssProps.width, height:cssProps.height});

window.setTimeout(function(){
    var leftPos = F.wrap.offset().left;
    var topPos = F.wrap.offset().top;
    $(".fancybox-wrap").css({"-webkit-transform": "translate3d(-"+leftPos+"px,-"+topPos+"px,0)", width: "880px", height: "500px" });

},200)

};

CSS:

.fancybox-wrap{
-webkit-transition:all 1s ease-in;  
-webkit-transform: translate3d(0,0,0);
-webkit-transition-duration: 1000ms;  
}

乾杯

4

0 に答える 0