Question

我正在使用angular和css来滑动页面过渡，并且有一个很好的转换工作版本类似于this plnker。这工作正常但css使用的是'绝对'，它将页面流中的元素排除在外，隐藏其余部分 - 即页脚。

正在转换的内容因页面而异。页脚被隐藏，因为显示的内容的许多父母的高度为0px;

所以我删除了absolute，现在转换发生了this，其中div再次出现在页面流中，但是当转换在彼此上下浮动时。

我可以使用过渡通过更改

使新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是一个选项。

Answer 1

Here you go.我编辑了你发布的第一个小提琴。造型是内联的，因为我无法对css进行改造，但是你得到了漂移。

  <nav>
            <a ng-click="go('/page1', 'slideLeft')">Page 1</a>
            <a ng-click="go('/page2', 'slideRight')">Page 2</a>
            <a ng-click="go('/page3', 'slideDown')">Page 3</a>
            <a ng-click="go('/page4')">Page 4</a> <!-- note: no transition specified -->
        </nav>

        <!-- App Content Container -->
        <div class="page-container">
            <div ng-view="" class="page-view" ng-class="pageAnimationClass"></div>
        </div>

        <footer>
          <div style="height: 50px; width:100%; position: fixed; bottom: 0; display: block; background: white; "><br>Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer</div>
        </footer>

您发布的示例使用固定位置标题，其中包含绝对定位的全屏内容区域。内容实际上在标题下方左右移动，我添加了页脚。

还有其他方法可以做到，但修复的页眉和页脚通常适用于网络应用程序。

如果您想要一个动态页脚，则需要重新设置内容区域。我会将页眉和页脚项目放在一个边距：0自动并使内容全宽，其中有一个居中的div，它是动画元素。它应该按照您的意图左右滑动，而不会破坏您的页脚。

请注意，如果您在不同高度的项目中进行转换，则您的页脚会在重新定位时抖动。也许可以考虑在页脚上添加一个回调动画，当页面转换动画播放和停止时，它会逐渐淡出并再次显示。

页面转换保留可变页面内容的页脚和标题

1 个答案: