jQuery：消除动画之间的白屏“暂停”

Posted 2023-02-21

【中文标题】jQuery：消除动画之间的白屏“暂停”

【英文标题】：jQuery: eliminate white screen "pause" between animations

【发布时间】：2018-12-22 22:10:20

【问题描述】：

我刚刚发现了Barba.js，发现它非常有用。它提供了同一网站的 URL 之间的平滑转换。

在 jQuery 的 fadeIn() 和 fadeOut() 方法的帮助下，我整理了一个由两个页面（index.html 和 about.html）组成的 Plunker 可以顺利加载。

$(document).ready(function() 
  var transEffect = Barba.BaseTransition.extend(
    start: function() 
      this.newContainerLoading.then(val => this.fadeInNewcontent($(this.newContainer)));
    ,
    fadeInNewcontent: function(nc) 
      nc.hide();
      var _this = this;
      $(this.oldContainer).fadeOut(1000).promise().done(() => 
        nc.css('visibility', 'visible');
        nc.fadeIn(1000, function() 
          _this.done();
        );
        $('html, body').animate(
          scrollTop: 300
        ,1000);
      );
    
  );
  Barba.Pjax.getTransition = function() 
    return transEffect;
  
  Barba.Pjax.start();
);

这个动画的问题是它们之间有一个白屏间隔。

我怎样才能消除这个间隔，使过渡更平滑？ “更流畅”是指类似于 this one（点击“查看案例”）。

【问题讨论】：

如果你还没弄明白，我明天去看看。

【参考方案1】：

我想出了这个版本的脚本：

$(function()
    var transEffect = Barba.BaseTransition.extend(
    start: function() 
      this.newContainerLoading.then(val => this.fadeInNewcontent($(this.newContainer)));
    ,
    fadeInNewcontent: function(nc) 
      var _this = this;
      nc.css('visibility', 'visible');
      nc.show().promise().done(() => 
        $(this.oldContainer).fadeOut(50);
        if (!isMobile.any()) 
          $('html, body').delay(100).animate(
            scrollTop: 200
          ,700);
        
      );
    
  );
  Barba.Pjax.getTransition = function() 
    return transEffect;
  
  Barba.Pjax.start();
);

更好，但不够流畅。查看 real life project 上的效果。我该如何改进它？

【参考方案2】：

白色屏幕是主体颜色，因为您使用的是promise().done(..) jquery 在fadeOut 完成后应用fadeIn，这样主体颜色就会出现。因此，这是一个类似于您所拥有的示例：

<style type="text/css">
    .One
        width: 100%;
        height: 100%;
        position: absolute;
        margin: 0px;
        padding: 0px;
        top: 0px;
        left: 0px;
        background-color: #476d80;
        cursor: pointer;
        z-index: 1;
    
    .Two
        width: 100%;
        height: 100%;
        position: absolute;
        margin: 0px;
        padding: 0px;
        top: 0px;
        left: 0px;
        background-color: #03A9F4;
        cursor: pointer;
        display: none;
    
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function()
        $('div.one').click(function()
            $(this).fadeOut(1000).promise().done(function()
                $('div.Two').fadeIn(1000);
            );
        );
    );
</script>
<div class="One"></div>
<div class="Two"></div>

就像你在上面的例子中看到的那样，白屏也会出现，所以如果你不想这样，就不要使用promise().done(..)。

$(document).ready(function()
    $('div.one').click(function()
        $(this).fadeOut(1000);
        $('div.Two').fadeIn(1000);
    );
);

你可以像这样编辑你的代码：

$(this.oldContainer).fadeOut(1000).promise().done(() => 
    $('html, body').animate(
        scrollTop: 300
    ,1000);
);
nc.css('visibility', 'visible');
nc.fadeIn(1000, function() 
    _this.done();
);

【讨论】：

我使用了您在 this page 上提供的脚本。点击“Studiu de caz”查看过渡。它确实改进了很多但是脚本引入了一个错误：单击浏览器的返回按钮会破坏主页滑块。

除非你有一个完整的工作应用程序的其他部分，例如状态管理器，或路由器，或两者，与本地存储和历史对象同步，然后，是的，像浏览器的后退按钮会给你带来麻烦。这是您要求的一个相当复杂的功能，您的应用需要更多的工程才能使这一切成为可能，这超出了 SO 上单个 Q 的范围。

【参考方案3】：

使用setTimeout() 来重叠淡出和淡入怎么样？这应该可以防止它完全消失，这是要避免的。

您可以尝试以下方法：

$(document).ready(function() 
  var transEffect = Barba.BaseTransition.extend(
    start: function() 
      this.newContainerLoading.then(val => this.fadeInNewcontent($(this.newContainer)));
    ,
    fadeInNewcontent: function(nc) 
      nc.hide();
      var _this = this;

      // manipulate these values
      let fadeOutTime = 1000;
      let fadeInTime = 1000;
      let overlapTime = 100;

      $(this.oldContainer).fadeOut(fadeOutTime);

      // use setTimeout() to begin fadeIn before fadeOut is completely done
      setTimeout(function () 
        nc.css('visibility', 'visible');
        nc.fadeIn(fadeInTime, function() 
          _this.done();
        );

        $('html, body').animate(
          scrollTop: 300
        , fadeInTime);

      , fadeOutTime - overlapTime)

    
  );
  Barba.Pjax.getTransition = function() 
    return transEffect;
  
  Barba.Pjax.start();
);

注意：这只是一个尝试，plunker 很有帮助，但很难看到实际的动画。

更新

我认为你需要类似上面的东西，但如果你想淡入/淡出黑色，那么你还需要做一些事情，比如在你体内的所有内容周围创建一个 div 包装器，然后给将您的应用程序的背景颜色设置为 div，#eff3f6，然后将实际的主体背景设置为黑色。您需要做一些工作才能获得您想要的确切效果，但类似的内容或下面 cmets 中的 SO 链接应该会有所帮助。

【讨论】：

“平滑”是指类似于 this one（等待 2、3 秒，然后单击“查看案例”）。我的意思是，一个“无形的过渡”。

你的意思是它淡入淡出黑色而不是白色？还是从某个方向淡入/淡出？

我正在寻找与我向您展示的地址相同的效果。我不知道怎么做。它可能会起作用。如何淡化为黑色？

是的，这是一个美丽的效果。但是，使用完整的解决方案来提供完全相同的功能特性将超出 *** 的目的。我会看看***.com/questions/967815/…，以及 *** 上的其他类似问题。这将带您朝着正确的方向前进，但您必须将确切的解决方案放在一起。另外，您是否检查过您喜欢的页面上的来源和 html？您应该能够通过检查找到他们在做什么。

这是我们为 Plunker 准备的帽子。