如何在单页应用中添加滑动页面过渡？答案

【问题标题】：How to add sliding page transition in a Single Page App?如何在单页应用中添加滑动页面过渡？
【发布时间】：2015-05-28 08:39:18
【问题描述】：

我在路由中使用 Sammy.JS，我可以通过它的回调隐藏和显示我的页面，但过渡效果不佳。我想要的是从右到左显示页面，或者当返回时，它会从左到右。

var app = Sammy('body', function() {

    this.get('#/start', function() {
        $('.app_page').hide();
        $('#start').show();
    });

    this.get('#/end', function() {
        $('.app_page').hide();
        $('#end').show();
    });

});

是否有任何框架或插件用于此？

【问题讨论】：

标签： javascript jquery single-page-application sammy.js

【解决方案1】：

我假设您正在寻找页面之间的 android 转换之类的东西，在这种情况下，您必须知道 web 还没有完全准备好，虽然这是可能的，但是您必须考虑动画页面时发生的许多问题，例如作为定位（您必须将定位设置为固定，这可能会导致很多问题）或长页和重页的动画性能。
我没有遇到过成熟的 javascript 库，每个人都只是为不同的网页使用自己的代码，需要不同的 css 样式。
制作精美动画的最佳方法是保持简单和轻盈，例如带有一点变换和缩放的淡入淡出效果。
如果你真的想做动画，最好自己做，绝对使用css动画（不是jquery）并在动画完成后删除动画（为了性能）。
并编写一个 javascript 函数来检查是否支持动画，如果不这样做的话。
如果您需要更多信息，请告诉我。我确实在我自己的 javascript 框架中尝试了页面转换，它工作正常，但只有在前 100 次失败之后。

【讨论】：

【解决方案2】：

我建议您使用jquery animation 来实现您的目标。

首先可以学习csstransition(页面从右到左效果。)
其次，你可以使用jquery动画与.show()，Example

您可以结合这些技巧来满足您的需求。

【讨论】：