-webkit-transform：使用position：absolute
我有一系列的div使用-webkit-transform从负边距顶部向下滑动到屏幕上的位置。 问题是，如果没有适用于他们的边缘优势，他们最终会坐在他们通常会坐的地方。
这意味着如果我显示第二个div，它有一个空白空间，大小超过它的第一个div。 为了解决这个问题，我可以对第二个div应用负余量顶部，但我认为这很麻烦。
我主要担心的是，如果dropdiv1的高度发生变化，那么我将不得不重置点击function上的值，让其他div在显示时再次正确对齐。
有没有办法修改-webkit-transform以合并postion：absolute？
我目前的代码是：
CSS：
#dropdiv1 { -webkit-transform: translate(0, -3000px); -webkit-transition: all ease-in 1s; } #dropdiv2 { -webkit-transform: translate(0, -3400px); -webkit-transition: all ease-in 1s; } #dropdiv3 { -webkit-transform: translate(0, -4200px); -webkit-transition: all ease-in 1s; }
JQuery的：
$('#clickme1').click( function() { $('#dropdiv1').css('-webkit-transform','translate(0, -335px)'); }); $('#clickme2').click( function() { $('#dropdiv2').css('-webkit-transform','translate(0, -2335px)'); }); $('#clickme3').click( function() { $('#dropdiv3').css('-webkit-transform','translate(0, -3300px)'); });
HTML：
Lots of random text.... Lots of random text.... Lots of random text....
我没有看到动画position: absolute任何逻辑行为position: absolute 。
这将更容易阅读：
#dropdiv1 { -webkit-transform: translate(0, -3000px); -webkit-transition: all ease-in 1s; } #dropdiv1.anim { -webkit-transform: translate(0, -335px); } #dropdiv2 { -webkit-transform: translate(0, -3400px); -webkit-transition: all ease-in 1s; } #dropdiv2.anim { -webkit-transform: translate(0, -2335px); -webkit-transition: all ease-in 1s; } #dropdiv3 { -webkit-transform: translate(0, -4200px); -webkit-transition: all ease-in 1s; } #dropdiv3.anim { -webkit-transform: translate(0, -3300px); -webkit-transition: all ease-in 1s; }
然后添加类来代替。
$('#dropdiv3').addClass('anim');
那个，或者在应用position: absolute之前运行.offset()并使用top和left来动画。
好的，我找到了一种解决方案。 仍然凌乱，但还可以：
CSS：
#bigcontainer { height: 1500px;/*as big as the bigest dropdiv to enable scrolling*/ } #dropdiv1 { -webkit-transform: translate(0, -3000px); -webkit-transition: all ease-in 1s; z-index: 1; position: absolute; } #dropdiv2 { -webkit-transform: translate(0, -3400px); -webkit-transition: all ease-in 1s; z-index: 2; position: absolute; } #dropdiv3 { -webkit-transform: translate(0, -4200px); -webkit-transition: all ease-in 1s; z-index: 3; position: absolute; }
不是特别是粉丝，但它会做！