我终于找到了一个比我所拥有的更好的解决方案。基本上,我为容器设置动画,并在调整大小时隐藏内容。然后,当调整大小完成后,我再次显示内容。我使用动画使它在隐藏/显示时看起来很漂亮。该代码将比我更好地解释它:
万能的琴
1 http://jsfiddle.net/charlescarver/hnQHH/134/
我的解释
当点击滑块时,它会通过变换将所有文本元素推离页面translate3d()
,然后隐藏 div。这是因为如果我在显示元素时尝试更新宽度,则会返回滞后。因此,一旦隐藏了 div,我只需translate3d()
再次使用变换向左或向右移动列。我可以在不让每个元素的宽度变短的情况下做到这一点,因为我将left
orright
值设置为一个永远无法达到的值,因此它扩展到页面之外足够远。这样,我可以简单地移动它,而不必担心它会过早地切断。
怪异
其中有些部分可能是多余的,但我会尽快清理它们。您可能还会注意到发生了一些奇怪的事情,例如 (1) cornerLeft
、 (2) dummy
、 (3) shadow
,以及在 JS 中的 (4) minimum
:
当我调整页面大小时,dummy
导航栏会扩展左右列的整个宽度,这意味着它会达到宽度的 1000%。这意味着我不能border-radius
在导航栏上为每列的左侧和右侧设置 a,因为它离屏幕太远以至于不可见。所以,我做了一个简单的角落来遮住窗户的每一侧,让它看起来很漂亮。
我隐藏.contentLeft
,.contentRight
当我调整大小时,它会在显示时导致延迟。不过,我不想摆脱导航栏,所以我制作了dummy
一个始终存在于页面上的导航栏,并且在调整大小即将发生时显示出来。我认为这减少了延迟,因为我不必添加元素,因为它总是在那里。
然而,其中一个问题是,当正常导航覆盖虚拟导航时,box-shadow
的重叠,导致它在 200 毫秒内变暗。我不喜欢这个。因此,我放置了一个始终位于导航顶部的阴影,无论导航显示什么。
我现在可以轻松设置可拖动列在停止之前可以达到的界限。方便,对吧?
代码
HTML:
<div id="container">
<div class="cornerLeft"></div>
<div class="cornerRight"></div>
<div class="shadow"></div>
<div class="left">
<div class="contentLeft">
<div class="header"></div>
<div class="headerbehind"></div>
<div class="text textLeft">Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus.</div>
</div>
<div class="dummy"></div>
<div class="dummybg"></div>
</div>
<div class="divider"></div>
<div class="right">
<div class="contentRight">
<div class="header"></div>
<div class="headerbehind"></div>
<div class="text textRight">Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus.</div>
</div>
<div class="dummy"></div>
<div class="dummybg"></div>
</div>
</div>
CSS:
* {
-webkit-text-size-adjust:none;
}
#container {
position:fixed;
left:0;
right:0;
bottom:0;
top:0;
background-color:#000;
-webkit-transform: translateZ(0);
-webkit-perspective: 1000;
}
.left {
-webkit-transform:translate3d(0, 0, 0);
position:absolute;
left:-3000px;
right:50%;
top:0;
bottom:0;
border-right:1px solid #000;
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
}
.right {
-webkit-transform:translate3d(0, 0, 0);
position:absolute;
left:50%;
right:-3000px;
top:0;
bottom:0;
border-left:1px solid #000;
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
}
.divider {
width:24px;
height:40px;
border-left:2px solid #000;
border-right:2px solid #000;
position:absolute;
left:50%;
z-index:3;
margin-left:-14px;
margin-top:-20px;
top:50%;
-webkit-transform:translate3d(0, 0, 0);
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
-webkit-touch-callout: none;
-webkit-user-select: none;
}
.contentLeft {
position:absolute;
right:0;
bottom:0;
top:0;
-webkit-transform: translateZ(0);
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
}
.contentRight {
position:absolute;
left:0;
bottom:0;
top:0;
-webkit-transform: translateZ(0);
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
}
.cornerLeft:after {
content:"";
height:5px;
position:absolute;
left:0;
width:5px;
background: -webkit-linear-gradient(top, #F0F2F4 0%, #EAEBEE 100%);
z-index:700;
border-top-left-radius:5px;
box-shadow:inset 0 1px 0 #fff;
}
.cornerLeft {
position:absolute;
z-index:700;
left:0;
width:5px;
height:5px;
background-color:#000;
}
.cornerRight:after {
content:"";
height:5px;
position:absolute;
right:0;
width:5px;
background: -webkit-linear-gradient(top, #F0F2F4 0%, #EAEBEE 100%);
z-index:700;
border-top-right-radius:5px;
box-shadow:inset 0 1px 0 #fff;
}
.cornerRight {
position:absolute;
z-index:700;
right:0;
width:5px;
height:5px;
background-color:#000;
}
.header, .dummy {
position: absolute;
left:0;
right:0;
height:35px;
background: -webkit-linear-gradient(top, #f4f5f7 0%, #a7abb7 100%);
border-top-left-radius: 5px;
border-top-right-radius: 5px;
font-size: 17px;
font-family: Helvetica;
font-weight: bold;
letter-spacing: .2px;
text-align: center;
padding-top:9px;
color:#71787F;
text-shadow: 0 1px 0 #E3E5E9;
word-break: break-all;
box-shadow:inset 0 1px 0 #fff, inset 0 -1px 0 #7A8090;
}
.shadow {
height:44px;
position:absolute;
left:0;
right:0;
box-shadow:0 1px 2px rgba(0, 0, 0, .2);
z-index:600;
}
.header {
z-index:500;
}
.dummy {
z-index:100;
}
.headerbehind {
position:absolute;
background-color:#000;
left:0;
right:0;
height:44px;
z-index:499;
}
.text, .dummybg {
margin-top:44px;
background-color:#fff;
position:absolute;
top:0;
right:0;
left:0;
bottom:0;
}
.text {
z-index:2;
padding:20px 40px;
-webkit-animation-duration:200ms;
-webkit-animation-timing-function:ease;
}
.contentLeft, .contentRight {
z-index:300;
}
.leftOut {
-webkit-transform:translate3d(-100%, 0, 0);
-webkit-animation-name:leftOut;
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
}
.leftIn {
-webkit-transform:translate3d(0, 0, 0);
-webkit-animation-name:leftIn;
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
}
@-webkit-keyframes leftOut {
0% {
-webkit-transform:translate3d(0, 0, 0);
}
100% {
-webkit-transform:translate3d(-100%, 0, 0);
}
}
@-webkit-keyframes leftIn {
0% {
-webkit-transform:translate3d(-100%, 0, 0);
}
100% {
-webkit-transform:translate3d(0, 0, 0);
}
}
.rightOut {
-webkit-transform:translate3d(100%, 0, 0);
-webkit-animation-name:rightOut;
}
.rightIn {
-webkit-transform:translate3d(0, 0, 0);
-webkit-animation-name:rightIn;
}
@-webkit-keyframes rightOut {
0% {
-webkit-transform:translate3d(0, 0, 0);
}
100% {
-webkit-transform:translate3d(100%, 0, 0);
}
}
@-webkit-keyframes rightIn {
0% {
-webkit-transform:translate3d(100%, 0, 0);
}
100% {
-webkit-transform:translate3d(0, 0, 0);
}
}
JS:
minimum = 100;
$(".contentLeft").css("width", ($("#container").width() / 2) - 1);
$(".contentRight").css("width", ($("#container").width() / 2) - 1);
$("div").on("touchstart", ".divider", function (e) {
$(".textLeft").removeClass("leftIn");
$(".textLeft").addClass("leftOut");
$(".textRight").removeClass("rightIn");
$(".textRight").addClass("rightOut");
setTimeout(function () {
$(".contentLeft, .contentRight").hide();
}, 200);
});
$("div").on("touchmove", ".divider", function (e) {
e.preventDefault();
if ($(".contentLeft").css("display", "none")) {
var page = $("#container").width();
var left = e.originalEvent.touches[0].pageX;
var right = page - left;
updateWidth(page, left, right);
}
});
//$(".contentLeft, .contentRight").hide();
$("div").on("touchend", ".divider", function (e) {
setTimeout(function () {
$(".textLeft").removeClass("leftOut");
$(".textLeft").addClass("leftIn");
$(".textRight").removeClass("rightOut");
$(".textRight").addClass("rightIn");
$(".contentLeft, .contentRight").show();
}, 200);
});
$(window).on('orientationchange', function (e) {
var page = $("#container").width();
var leftWidth = $(".contentLeft").width();
var rightWidth = $(".contentRight").width();
var previousWidth = (leftWidth + rightWidth);
if (leftWidth + rightWidth + 2 < page) {
var left = (page / 2) - (previousWidth / 2) + leftWidth;
} else if (leftWidth + rightWidth + 2 > page) {
var left = leftWidth - ((previousWidth / 2) - (page / 2));
}
var right = page - left;
updateWidth(page, left, right);
});
function updateWidth(page, left, right) {
if (left < minimum) {
var finalLeft = minimum;
var finalRight = (-1 * (page - minimum));
var finalRightWidth = (page - minimum);
} else if (right < minimum) {
var finalLeft = (page - minimum);
var finalRight = (-1 * minimum);
var finalRightWidth = minimum;
} else {
var finalLeft = (left);
var finalRight = (0 - right);
var finalRightWidth = (right);
}
$(".divider").css({
"-webkit-transform": "translate3d(" + finalLeft + "px, 0, 0)",
"left": "auto",
});
$(".left").css({
"-webkit-transform": "translate3d(" + finalLeft + "px, 0, 0)",
"right": "100%",
});
$(".right").css({
"-webkit-transform": "translate3d(" + finalRight + "px, 0, 0)",
"left": "100%",
});
$(".contentLeft").css("width", finalLeft);
$(".contentRight").css("width", finalRightWidth);
}
1 是的,我尝试了 134 次。