smoothstate.js不适用于不同的背景图片吗？

我正在创建从我的介绍页面到我的主页的平滑过渡，因为您可以在这里看到http://trial.kareemhackett.com所以我使用了smoothstate.js，但是我无法让它在页面之间平滑过渡，我觉得这是因为我有图像作为不同于任何演示的背景。但希望这可能不是我在这里带来的情况。也许是因为我在使用引导程序？smoothstate.js不适用于不同的背景图片吗？

这是我的代码。我也尝试了reveal.js，虽然这有点不同，我只需要合并平滑过渡。

任何帮助，非常感谢。

$(function(){ 
 
    'use strict'; 
 
    var $page = $('#main'), 
 
     options = { 
 
     debug: true, 
 
     prefetch: true, 
 
     cacheLength: 2, 
 
     onStart: { 
 
      duration: 250, // Duration of our animation 
 
      render: function ($container) { 
 
      // Add your CSS animation reversing class 
 
      $container.addClass('is-exiting'); 
 
      // Restart your animation 
 
      smoothState.restartCSSAnimations(); 
 
      } 
 
     }, 
 
     onReady: { 
 
      duration: 0, 
 
      render: function ($container, $newContent) { 
 
      // Remove your CSS animation reversing class 
 
      $container.removeClass('is-exiting'); 
 
      // Inject the new content 
 
      $container.html($newContent); 
 
      } 
 
     } 
 
     }, 
 
     smoothState = $page.smoothState(options).data('smoothState'); 
 
});

.intro { 
 
    background: url(img/headerbg.jpg) no-repeat center center fixed; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
    width: 100%; 
 
    height: 100vh; 
 
} 
 
.site-wrapper { 
 
    display: table; 
 
    width: 100%; 
 
    height: 100%; /* For at least Firefox */ 
 
    min-height: 100%; 
 
    -webkit-box-shadow: inset 0 0 100px rgba(0,0,0,.5); 
 
      box-shadow: inset 0 0 100px rgba(0,0,0,.5); 
 
} 
 
.site-wrapper-inner { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
} 
 
.cover-container { 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
} 
 

 
.inner { 
 
    padding: 30px; 
 
} 
 

 
.cover { 
 
    padding: 0 20px; 
 
}

<div id="main" class="m-scene"> 
 
     <div class="scene_element scene_element--fadeinright"> 
 
     <div class="intro"> 
 
      <div class="site-wrapper"> 
 

 
      <div class="site-wrapper-inner"> 
 
       <div class="cover-container"> 
 
       <div class="inner cover"> 
 
        <a class="center-block" href="newhome.html" data-transition="fade"><img class="img-responsive" src="img/Bang_logo.png"></a> 
 
       </div> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div>

来源

2015-06-18 Kareem Hackett

它看起来并不像你有CSS定义的任何动画。所以m-scene, scene_element, scene_element--fadeinright, and is-exiting没有做任何事情。

smoothState.js似乎正在工作，但它将通过ajax替换内容，并按照指定添加is-exiting类。

来源

2015-06-19 15:38:59

我不明白为什么，但我有一个令人难以置信的很难得到这个或任何网页过渡我的这个项目正在进行中。我添加了关键帧到这些类，但仍然没有运气。 –

据我所知，你错过了CSS动画，并且有一半时间我在jquery.smoothState.js上得到404。

我确定Bootstrap与它没有任何关系，因为我使用Bootstrap来创建一个网站，其中包含与您类似的过渡和背景图片，并且我已经运作。

如果你喜欢，欢迎你检查出的代码，它的记录尽我所能： http://alex-oconnell.com/client/aarmour/

来源

2015-06-24 08:36:16

smoothstate.js不适用于不同的背景图片吗？

回答

相关问题