1

注意：请先阅读我的评论。

我正在构建一个 iPad 特定的网络应用程序。单击链接时，我正在使用fancybox 覆盖带有内容的窗口-尽管我认为我的问题不是特定于fancybox。

我正在尝试调出叠加层，然后将其动画化为全屏（更改位置和尺寸）。我正在尝试使用 css3 转换而不是开箱即用的传统动画转换来编写一个花式转换，以获得加速。我快到了，但我遇到了一个奇怪的问题......

当我应用变换来更改叠加层的高度时，视口会发生变化 - 它会缩小。无论我将框的高度调整为多大，视口都会缩小（我制作的框越大，视口缩小的越多）。我正在使用元标记：。奇怪的是，这不会发生宽度。覆盖的宽度很好地转换为全屏宽度，没有视口变化。这只是高度。

有任何想法吗？我确定我错过了一些简单的东西。

这是一些代码，以防万一。注意：我对 fancybook 库做了一些更改，所以如果您在下面看到一些看起来很奇怪的东西，那就是原因。正如我所说，我认为这与 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