gpt4 book ai didi

javascript - 在 Web 应用程序中滑动页面

转载 作者:塔克拉玛干 更新时间:2023-11-02 21:06:55 28 4
gpt4 key购买 nike

我想用一些动画向左/向右滑动页面。 (就像 iphone 应用程序一样)

<body>
<div id="page1">
<!-- Full screen content with a button at bottom, on click I want to show #page2 but with slide animation. #page1 will slide-out left and #page2 will slide-in from right-->
</div>
<div id="page2">
<!-- Full screen content with a button at bottom, on click It will show page1 with slide animation -->
</div>
</body>

最佳答案

假设您有一个用于所选页面的“selected”类和一个用于每个页面的“page”类,请按照以下几行尝试:

.page {
position:absolute;
left:100%;

-moz-transition:1s left;
-o-transition:1s left;
-webkit-transition:1s left;
transition:1s left;
}

.page.selected {
left: 0;
}

这将适用于 Webkit、Firefox 4 和 Opera(不记得版本),并且将在不支持的浏览器上正常降级(它们只会一步从头到尾)。

关于javascript - 在 Web 应用程序中滑动页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5274462/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com