使用 CSS3 实现 HTML5 中的平滑页面转换，无需使用 jquery
我正在为移动设备设计一个网页。我知道 jquery 很棒，但我不想使用它。我想实现像这样的平滑页面转换 http://jquerymobile.com/demos/1.0a4.1 / 但不使用 jquery。我怎样才能做到这一点？页面转换之间会调用 Web 服务，因此会有延迟。我希望它尽可能顺利。
I am designing a web page for mobile devices. I know jquery is awesome but I dont want to use it. I want to achieve smooth page transitions like this http://jquerymobile.com/demos/1.0a4.1/ but without using jquery. How can I achieve that? There are web service being called between page transtitions, hence there will be delay. I want it to be as smooth as possible.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
面对现实吧：你将不得不使用 JavaScript，如果不使用某些框架或其他框架，这将非常乏味。要获得平滑的页面转换，您有两种选择：
1) 将站点作为单个页面运行。这就是您链接到的网站中使用的内容。整个过程没有页面转换；它只是一个页面，其中包含一些用于为内容添加动画效果并使用 AJAH 动态加载的点击事件。
2) 运行多页面站点，但使用本地存储。您将拥有少量页面，并缓存它们所需的资源。 JavaScript 会在页面加载时立即运行，并在 AJAX 加载和显示普通内容的同时绘制一个漂亮的加载屏幕。
就我个人而言，我不会太关心页面转换；这就是网站的运作方式。也不要被 jQuery 吓倒，因为当您编写完所有这些 JavaScript 时，您将会需要它。即使对于移动网站，库的大小也几乎可以接受（您可以使用 CDN 缓存副本）。
Face it: You're going to have to use JavaScript, and it'll be very tedious without using some framework or other. To get smooth page transitions, you have two options:
1) Run the site as a single page. That is what is used in the site you link to. The whole thing has no page transitions; it's all one page with some click events used to animate the content and load it dynamically with AJAH.
2) Run a multi page site, but using local storage. You would have a small number of pages, and cache the resources needed for them. The JavaScript would run instantly when the page was loaded, and draw a nice load screen while the ordinary content was loaded and displayed by AJAX.
Personally, I wouldn't be too concerned about page transitions; it's just how websites work. Don't be put off by jQuery either, because by the time you've written all this JavaScript you will be wanting it. Even for mobile sites, the size of the library is just about acceptably small (you can use a CDN-cached copy).