3

我有一个居中的 div 和 4 个其他 div - 在居中的 div 的每一侧都有一个。当我单击一个按钮时，每个 div 都会滑入框架并将居中的 div 推出。

它在 chrome 中运行良好，但使用 firefox 失败，让我没有任何来自 firebug 的错误。

这是我的实现，目前在 Firefox 中无法正常工作。

如您所见，在 Firefox 中，居中的 div 只是消失了，而不是滑出屏幕。使用 chrome，居中的 div 按预期滑出。

有人可以看看萤火虫并告诉我他们认为可能导致问题的原因吗？

此代码基于 jsfiddle，可使用 chrome 或 firefox 正常工作。

这是jsfiddle的代码：

这是html

<div id="fullContainer">
    <div id="right">

    </div>
    <div id="left">

    </div>
    <div id="top">

    </div>
    <div id="bottom">

    </div>
</div>
<div id="centerContainer">
    <div id="relativeContainer">
        <div id="content">
            This is where your face should go.  Notice that I placed it within a centering div.  
            This will enable the face to be absolutely positioned, and allow for you to modify 
            it's position when the side-bars slide in.
            <div data-move="left">Open Left</div>
            <div data-move="right">Open Right</div>
            <div data-move="top">Open Top</div>
            <div data-move="bottom">Open Bottom</div>
        </div>
    </div>
</div>

这是CSS

#centerContainer {
    position:fixed;
    top:50%;
    left:50%;
    width:0;
    height:0;
}
#relativeContainer {
    position:relative;
}
#fullContainer {
    position:fixed;
    width:100%;
    height:100%;
    top:0;
    left:0;
}
#content {
    position:absolute;
    width:300px;
    height:400px;
    top:-200px;
    left:-150px;
    background:#BADA55;
    border:1px solid #444;
    padding:10px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
#content.right {
    left:-250px;
}
#content.left {
    left:-50px;
}
#content.bottom {
    top:-300px;
}
#content.top {
    top:-100px;
}

#content div {
    cursor:pointer;
    color:blue;
    text-decoration:underline;
    margin-top:15px;
    text-align:center;
}
#left {
    position:absolute;
    top:0;
    left:-125px;
    height:100%;
    width:100px;
    background:blue;
    border:1px solid #444;
    padding:10px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#left.opened {
    left:0;
}

#right {
    position:absolute;
    top:0;
    right:-125px;
    height:100%;
    width:100px;
    background:green;
    border:1px solid #444;
    padding:10px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#right.opened {
    right:0;
}

#top {
    position:absolute;
    left:0;
    top:-125px;
    width:100%;
    height:100px;
    background:yellow;
    border:1px solid #444;
    padding:10px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#top.opened {
    top:0;
}

#bottom {
    position:absolute;
    left:0;
    bottom:-125px;
    width:100%;
    height:100px;
    background:red;
    border:1px solid #444;
    padding:10px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#bottom.opened {
    bottom:0;
}

这是javascript：

function SlideOut(element){

    $(".opened").removeClass("opened");
    $("#"+element).addClass("opened");
    $("#content").removeClass().addClass(element);

}
$("#content div").click(function(){

    var move = $(this).attr('data-move');

    SlideOut(move);

});

这是小提琴

谢谢

凯蒂

4

1 回答 1

0

我做了一些测试，发现发生了什么。出于说明和演示目的，在此小提琴中对此进行了复制。

在 Firefox 中，如果您正在转换 CSS 属性left，它需要有一个初始值才能开始。如果没有，那么它不会转换，它只会将值分配给属性。

在 Chrome 中，如果您没有设置初始值，它显然只是从它所在的任何地方开始，不用担心它。

如果您在 Firefox 中查看上述小提琴并单击第一行，它只会出现在更远的位置，而第二行则过渡到上方。唯一的区别是第二行有一个left: 0初始设置。在 Chrome 上，两者的工作方式相同。

如果你把 aleft: 0放在你的#content div上面，它会像在 Firefox 中一样滑动。（在 Firebug 中测试并且确实修复了它）。

于 2012-10-29T20:10:13.273 回答