html - smoothstate.js 是否不适用于不同的背景图像？

Question

我正在努力创建从介绍页面到主页的平滑过渡，您可以在此处看到 http://trial.kareemhackett.com所以我使用了 smoothstate.js 但我无法让它在页面之间平滑过渡，我觉得这是因为我有图像作为背景，这与任何演示都不一样。但希望这可能不是我把它带到这里的情况。可能是因为我使用的是 Bootstrap ？

这是我的代码。我也尝试过 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>

Answer 1

您似乎没有使用 CSS 定义任何动画。所以 m-scene、scene_element、scene_element--fadeinright 和 is-exiting 没有做任何事情。

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