CSS / JavaScript滑出DIV和滑入DIV

Question

I am wanting to be able to slide a div out (to the left), while sliding another div in (from the right) at the same time . 我希望能够一个div滑出（左侧），而在同一时间滑动另一个DIV（右一）。

My HTML code is like this: 我的HTML代码是这样的：

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

Currently I am using 目前我正在使用

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

to switch between the pages, but I would like to have the transition as smooth as possible. 可以在页面之间切换，但是我希望过渡尽可能平滑。

Is there a way I can do this, without jQuery and preferably just in CSS? 有没有一种方法，我可以不用jQuery，最好只使用CSS？
If not, how can I do it in jQuery? 如果没有，如何在jQuery中实现？

Answer 1

here's an (almost) full CSS solution: 这是一个（几乎）完整的CSS解决方案：

If you can be more specific about what you want I can happily tweak or guide you through the code to help you. 如果您可以更具体地了解自己想要的东西，我可以很高兴地调整或指导您使用代码来帮助您。

It relies on using translate3d: 它依赖于使用translate3d：

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

DEMO 演示

Answer 2

Yes you can do it with pure css by using animation keyframes . 是的，您可以通过使用animation keyframes使用纯CSS来实现。

HTML 的HTML

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

CSS 的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%}
}

However there is one huge limitation to this method. 但是，这种方法有一个巨大的局限性。 CSS can't handle any real events. CSS无法处理任何真实事件。 So if you want this animation to appear when a button is clicked or something, you'll have to use JavaScript. 因此，如果您希望在单击按钮或类似操作时显示此动画，则必须使用JavaScript。

Demo jsFiddle 演示 jsFiddle

Edited Now the left one enters and the right one exits at the same time. 编辑现在左边进入，并在同一时间将正确的退出。

UPDATE The same example using translate3d => jsFiddle 更新使用translate3d => jsFiddle的同一示例

Answer 3

using jQuery 使用jQuery

http://jsfiddle.net/5EsQk/ 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);
});

edited fiddle => http://jsfiddle.net/5EsQk/1/ 编辑小提琴=> http://jsfiddle.net/5EsQk/1/

Answer 4

Very much possible without jQuery, using only CSS and CSS transitions. 如果没有jQuery，仅使用CSS和CSS转换就很有可能。

You can set up your CSS so that if <div id="content"> has no class .showPage2 , it shows page 1. If it does have .showPage2 , it shows page 2. 您可以设置CSS，以便如果<div id="content">没有类.showPage2 ，则显示第1页。如果它具有.showPage2 ，则显示第2页。

The transition is then only triggered by toggling the class using (native) Javascript. 然后，仅通过使用（本机）Javascript切换类来触发转换。 The animation is handled by CSS transitions. 动画由CSS过渡处理。 This means that if by any change the browser does not support CSS3 transitions, the user will still see the correct page; 这意味着，如果进行任何更改，浏览器都不支持CSS3转换，则用户仍将看到正确的页面； only not with the fancy transition. 只是没有花哨的过渡。 CSS3 transitions are generally very smooth. CSS3过渡通常非常平滑。

This is what the CSS would look like: 这是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%;
}

And the Javascript could look something like this: Javascript可能看起来像这样：

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

I hope this handles it in a way that fits your needs. 我希望这能满足您的需求。

CSS / JavaScript滑出DIV和滑入DIV

问题描述

4 个解决方案

解决方案1
1 2014-07-30 19:34:18

解决方案2
1 已采纳 2014-07-30 19:36:18

解决方案3
0 2014-07-30 19:12:26

解决方案4
0 2014-07-30 19:46:26

CSS / JavaScript滑出DIV和滑入DIV

问题描述

4 个解决方案

解决方案1 1 2014-07-30 19:34:18

解决方案2 1 已采纳 2014-07-30 19:36:18

解决方案3 0 2014-07-30 19:12:26

解决方案4 0 2014-07-30 19:46:26

解决方案1
1 2014-07-30 19:34:18

解决方案2
1 已采纳 2014-07-30 19:36:18

解决方案3
0 2014-07-30 19:12:26

解决方案4
0 2014-07-30 19:46:26