use*_*460 3 html javascript css slide
我希望能够将一个 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 中做到这一点？
小智 6
是的，你可以通过使用纯CSS来做到这一点animation keyframes。
超文本标记语言
<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使用=> jsFiddle 的
相同示例