Pjax动画

Question

我终于让pjax工作了，但是我有另一个问题...如何添加一些jquery动画，比如淡出/滑动旧内容和淡入/滑动新内容？

默认情况下，pjax只是改变内容而没有任何好看的效果...

非常感谢任何帮助。

最好的问候

- Maja Jelen

Answer 1

基本上，你可以使用一堆事件并根据需要进行操作。这是一个基本的fadeIn和fadeOut版本，它使用pjax:start和pjax:end作为触发器。

$(document)
  .on('pjax:start', function() { $('#main').fadeOut(200); })
  .on('pjax:end',   function() { $('#main').fadeIn(200); })

显然，你需要将#main替换为你要在其中切换内容的容器元素。

- Marcel

---

它在我的网站上无法工作 http://stackoverflow.com/questions/17464641/pjax-add-animation-to-content。请帮忙。 - Erma Isabel

你可以通过将 pjax:end 更改为 pjax:complete 并在淡入淡出的时间上进行不同的设置，以避免内容闪烁，从而获得更好的结果。 - ctf0

Answer 2

假设您想创建一个目录浏览器，就像GitHub一样。

让我们从Twitter Bootstrap的轮播开始，创建一个带有标记的视图来使用它（希望您不介意使用haml）：

这是容器：

%div#uber-glider.glider.carousel.span12
  %div.carousel-inner
    = yield
%div#uber-glider-stage.glider-stage(style="display:none")

以下是一个示例部分，用于在其中呈现pjaxed内容：

%div.glider-group.item
  %div.glider-heading(data-title="#{@super_department.name} Super Department" data-resource="#{super_department_path @super_department.id}")
    %ul.breadcrumb
      %li
        %a.glider-link(href="#{divisions_path}")= "Divisions"
        %span.divider= "/"
      %li.active
        %a.glider-link(href="#{division_path @division.id}")= @division.name
        %span.divider= "/"
      %li.active
        = @super_department.name
  %div.glider-body
    - @super_department.departments.each_with_index do |department, i|
      %div.glider-listing
        %a.glider-link(data-glide="descend" data-target="#uber-glider" href="#{department_path department.id}")
          = department.name

现在让我们使用pjax创建一些Javascript代码：

(function($){
    "use strict";

  $(function() {
    $('#uber-glider-stage').on('pjax:success', function(e){
      var $incoming_group = $('#uber-glider-stage .glider-group')
        , $incoming_heading = $('#uber-glider-stage .glider-heading')
        , incoming_resource = $incoming_heading.data('resource')
        , $existing_groups = $('#uber-glider .glider-group')
        , $existing_headings = $('#uber-glider .glider-heading')
        , existing_last_idx = $existing_groups.length - 1
        , matching_idx = -1;
      $existing_headings.each(function(idx) {
        if ($(this).data('resource') === incoming_resource) {
          matching_idx = idx;
        }
      });
      if (matching_idx > -1) {
        // pop                        
        $incoming_group.remove();
        $('#uber-glider').one('slid', function() {
          for (; existing_last_idx > matching_idx; existing_last_idx--) {
            $('#uber-glider .glider-group').last().remove();
          }
        });
        $('#uber-glider').carousel(matching_idx);
      }
      else {
        // push        
        debug.debug("pushing 1 level");
        $incoming_group.detach();
        var $container = $('#uber-glider > .carousel-inner');
        $container.append($incoming_group);
        $('#uber-glider').carousel('next');
      }
    });


    $('.glider-link').pjax('#uber-glider-stage', { 'timeout' : '3000' }).on('click', function(){
      debug.debug(".glider-link click");
    });
  });

  $('#uber-glider .carousel-inner .item').addClass('active');
  $('#uber-glider').carousel('pause');
})(window.jQuery);

- Mark Paine

---

在HAML中，您不需要使用％div.cssClass来表示<div>，只需使用.cssClass（默认标签为DIV :)）即可。 - MegaTux

Answer 3

我猜加载指示器和动画差不多是一回事。在这种情况下，请使用pjax:send和pjax:complete事件。

从pjax自述文件中，

发送和完成是一个很好的事件对，如果您正在实现一个加载指示器，则可以使用它们。只有在实际发出请求时才会触发它们，而不是在从缓存中加载时触发。

- MegaTux