如何实现jquery页面转换？

Posted 2023-03-15

【中文标题】如何实现jquery页面转换？

【英文标题】：How to implement the jquery page transition?

【发布时间】：2014-05-27 08:17:16

【问题描述】：

我正在开发 phonegap 应用程序。我想在切换页面时添加原生幻灯片页面过渡。我没有使用jquery mobile。而不是我使用 bootstrap 。但问题是引导程序中没有任何页面转换。那么在 jquery 或 javascript 中是否有任何方法可以在应用程序中实现它。我搜索了很多，但所有示例仅适用于 div 转换。

【参考方案1】：

您可以使用名为 Animate.css (http://daneden.github.io/animate.css/) 的 CSS 库。您可以将动画类添加到页面并在左右滑动。我有一些时间，所以做了一个工作演示它是如何工作的 -

工作演示 - http://codepen.io/nitishdhar/pen/FIzst

所以基本上我已经创建了一个页面结构并点击页面链接，我为它们分配了幻灯片效果所需的类。这也处理下一页和上一页的处理，因此如果您从第一页移动到第二页，则幻灯片将从右到左；如果您从第二页移动到第一页，则幻灯片将从左到右。

HTML 结构

<ul class="nav navbar-nav">
    <li><a class="page-link" href="#" data-page="1">Page 1</a></li>
    <li><a class="page-link" href="#" data-page="2">Page 2</a></li>
    <li><a class="page-link" href="#" data-page="3">Page 3</a></li>
</ul> 
<div class="container">
    <div class="page active" id="page-1" data-page="1">
        <h1>Page 1</h1>
        <p>
            <a href="#"  class="page-link btn btn-lg btn-primary" data-page="2" role="button">Next &raquo;</a>
        </p>
    </div>
    <div class="page" id="page-2"  data-page="2">
        <h1>Page 2</h1>
        <p>
            <a href="#"  class="page-link btn btn-lg btn-primary" data-page="1" role="button">&laquo; Prev</a>
            <a href="#"  class="page-link btn btn-lg btn-primary" data-page="3" role="button">Next &raquo;</a>
        </p>
    </div>

    <div class="page" id="page-3"  data-page="3">
        <h1>Page 3</h1>
        <p>
            <a href="#"  class="page-link btn btn-lg btn-primary" data-page="2" role="button">&laquo; Prev</a>
        </p>
    </div>

        </div> <!-- /container -->

jQuery 代码

$(document).ready(function()
  $('.page-link').click(function()
     var goToPage = $(this).data('page');
     var nextPage = $('#page-' + goToPage);
     var currPage = $('.page.active');
     if(goToPage > currPage.data('page')) 
       currPage.addClass('animated slideOutLeft');
       nextPage.addClass('active animated slideInRight');
      else if(goToPage < currPage.data('page')) 
       currPage.addClass('animated slideOutRight');
       nextPage.addClass('active animated slideInLeft');
     
     currPage.removeClass('active animated slideInRight slideInLeft slideOutRight slideOutLeft');
  );
);