Question

我正在开发phonegap应用程序。我想在切换页面时添加原生幻灯片页面转换。我没有使用jquery mobile。而不是我使用引导程序。但问题是引导程序中的页面转换没有任何内容。所以在jquery或javascript中有任何方法可以在应用程序中实现它。我已经搜索了很多但是所有的例子都只用于div转换。

Answer 1

您可以使用名为Animate.css（http://daneden.github.io/animate.css/）的CSS库。您可以将动画类添加到页面＆amp;然后向左滑动＆amp;对。我有一些时间，所以做了一个如何工作的工作演示 -

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

所以基本上我已经创建了一个页面结构＆amp;点击页面链接，我正在为它们分配幻灯片效果所需的类。这也处理下一个＆amp;上一页处理如果你从第一页移动到第二页，幻灯片将从右到左＆amp;如果从第2步到第1步，幻灯片将从左到右。

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');
  });
});

如何实现jquery页面转换？

1 个答案: