我正在使用angular和css进行滑动页面转换,并且有一个很好的转换工作版本,类似于this plnker。这工作正常,但CSS是使用'绝对',它把页面流中的元素排除在外,隐藏了其余部分 - 即页脚。页面转换为可变页面内容保留页脚和页眉
正在进行转换的内容因页面而异。页脚被隐藏,因为显示内容的许多父母的高度为0px;
因此,我删除了absolute
,现在过渡发生了类似于this的情况,其中div再次处于页面流中,但是当过渡浮动在彼此之上和之下时。
我可以使用转换,使新的div在同一级别的退出格输入通过改变
.slideRight.ng-leave {
transition-property: all;
transform: translate3d(0,0,0);
}
.slideRight.ng-leave.ng-leave-active {
transition-property: all;
transform: translate3d(100%,0,0);
}
到
.slideRight.ng-leave {
transition-property: all;
transform: translate3d(0,-100%,0);
}
.slideRight.ng-leave.ng-leave-active {
transition-property: all;
transform: translate3d(100%,-100%,0);
}
如本plnker。但是,问题在于div高度仍然会影响页面,所以当新div进入并且页面的其余部分受到影响时,您可以看到垂直滚动条。
进入页面的div可以是不同的高度,所以我不认为只是在父div上设置定义的高度,并且设置overflow-y: hidden
是一个选项。
我不明白为什么'position:absolute;'不是一个选项?它将这个元素从流中取出,但'.page-container'是相对的,所以这个元素就像流中的包装器一样。 – 2014-11-04 12:33:47
@JanHommes我记得试图让这个工作与一个页脚和挣扎。我希望页脚与页面顶部导航保持一致。也许位置:绝对可能是好的 – myol 2014-11-04 12:53:33
该元素对于下一个定位的元素总是绝对的。如果没有,那对身体来说是绝对的。所以如果你的页面转换是相对于你的容器div而页脚是相对于body而言的话,应该没有问题。 – 2014-11-04 12:56:38