Question

我希望能够将div滑出（向左），同时在同时滑动另一个div（从右侧）。

我的HTML代码是这样的：

<body>
    <div id="content">
        <div id="page1">
            <!-- Content Area 1 -->
        </div>
        <div id="page2">
            <!-- Content Area 1 -->
        </div>
    </div>
</body>

目前我正在使用

document.getElementById('page1').style.display = "none";
document.getElementById('page2').style.display = "inline";

在页面之间切换，但我希望过渡尽可能顺利。

有没有办法可以做到这一点，没有jQuery，最好只用CSS？如果没有，我怎么能在jQuery中做到这一点？

Answer 1

这是一个（几乎）完整的CSS解决方案：

如果您可以更具体地了解您的需求，我可以愉快地调整或指导您完成代码以帮助您。

它依赖于使用translate3d：

transform: translate3d(-200px, 0, 0);

DEMO

Answer 2

是的，您可以使用animation keyframes来使用纯CSS进行此操作。

<强> HTML

<div id="content">
    <div id="page1" class="page">
        <!-- Content Area 1 -->        
    </div>
    <div id="page2" class="page">
        <!-- Content Area 1 -->        
    </div>
</div>

<强> CSS

html,body {
    height: 100%;    
    overflow: hidden;
}

#content {
    position: relative;
    height: 100%;
}
.page {
    position: absolute;
    top:0;

    height: 100%;  
    width: 100%;
}
#page1 {
    background: #d94e4e;
    left:-100%;
    -webkit-animation: left-to-right 5s linear forwards;
    animation: left-to-right 5s linear forwards;
}
#page2 {    
    background: #60b044;    
    left:0;    
    -webkit-animation: right-to-left 5s linear forwards;
    animation: right-to-left 5s linear forwards;
}

@-webkit-keyframes left-to-right{
    from{left:-100%}
    to{left:0}
}
@-webkit-keyframes right-to-left{
    from{left:0}
    to{left:100%}
}

@keyframes left-to-right{
    from{left:-100%}
    to{left:0}
}
@keyframes right-to-left{
    from{left:0}
    to{left:100%}
}

然而此方法存在一个巨大的限制。 CSS无法处理任何真实事件。因此，如果您希望在单击按钮或其他内容时显示此动画，则必须使用JavaScript。

演示 jsFiddle

<强>被修改现在左边的一个进入，右边的一个同时退出。

<强>更新使用translate3d =＆gt;的相同示例jsFiddle

Answer 3

使用jQuery

http://jsfiddle.net/5EsQk/

<div id="content">
         <div id="page1" style="width: 100px; height: 100px; color: white; background-color:silver; float: left; margin-left: -90px;">
             Content Area 1
    </div>
    <div id="page2" style="width: 100px; height: 100px; color: white; background-color:silver; float: right; margin-right: -90px;">
        Content Area 1
    </div>
</div>

$(document).ready(function() {
    $('#page1').animate({
        marginLeft: "+=90"
    }, 5000);
    $('#page2').animate({
        marginRight: "+=90"
    }, 5000);
});

编辑小提琴=＆gt; http://jsfiddle.net/5EsQk/1/

Answer 4

没有jQuery，只使用CSS和CSS转换。

您可以设置CSS，以便<div id="content">没有课程.showPage2，它会显示第1页。如果它有.showPage2，则会显示第2页。

然后只能通过使用（本机）Javascript切换类来触发转换。动画由CSS过渡处理。这意味着如果通过任何更改浏览器不支持CSS3转换，用户仍将看到正确的页面;只是没有花哨的过渡。 CSS3过渡通常非常流畅。

这就是CSS的样子：

#content
{
    position: relative;
    overflow: hidden;
}
#content #page1
{
    position: absolute;
    left: 0%;

    width: 100%;
    height: 100%;

    transition: left .5s ease-out;
    -webkit-transition: left .5s ease-out;
}
#content #page2
{
    position: absolute;
    left: 100%;

    width: 100%;
    height: 100%;

    transition: left .5s ease-out;
    -webkit-transition: left .5s ease-out;
}

#content.showPage2 #page1
{
    left: -100%;
}
#content.showPage2 #page2
{
    left: 0%;
}

Javascript看起来像这样：

function showPage1()
{
    document.getElementById("content").setAttribute("class", "")
}
function showPage2()
{
    document.getElementById("content").setAttribute("class", "showPage2")
}

我希望这能以适合您需求的方式处理它。

CSS / JavaScript幻灯片DIV输出并滑动DIV

4 个答案: