Question

例如我的网页很少

如何点击1.html至2.html

中的链接

然后1.html向左滑动并2.html加载并从right滑动？

就像这个效果：

https://delicious.com/join

以及github项目

https://github.com/CyanogenMod/android_packages_apps_Settings

没有浏览器刷新闪烁

并且URL也发生了变化。

是否使用jquery？

我必须使用mvc php framework或rails来构建site？

如何创建这样的webpage？

是open source project还是示例code？

Answer 1

如果你的问题是如何做动画，那么JQuery就是负责它的人。

您可以查看此链接以供参考：

Downloads
Demo

或者您可以在互联网上尝试其他搜索，只需输入“Fancy Sliding Forms”

即可

实际上，这完全取决于您的网页设计师/开发人员如何实现该Jquery。只需阅读文档。

神速！

Answer 2

最近我面临的挑战是开发轻量级Web应用程序，因此我使用了最少的jQuery，因为在移动设备上查看时，无法保证顺畅的行为。所以我选择了硬件加速的css转换。您可以将网页的内容放在两个div中，并动态添加和删除类以查看此效果。

/* CSS */
.page-one {
  width: 100%;  
  -webkit-transform : translateX(0px);
  height:100%;
  position: fixed;
  background-color: #fff;
  color : #6B6B77;
  box-shadow: -3px 3px 3px #ddd;
  overflow: auto;
}

.page-one.invisible {
  -webkit-transform: translateX(-100%);
}

.page-one,
body {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.page-two {
  -webkit-transform: translateX(100%);
}

.page-two.visible {
  -webkit-transform: translateX(0px);
}

.page-two,
body {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

两个网页之间的滑动过渡动画

2 个答案: