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, and is-exiting 没有做任何事情。

smoothState.js 似乎有效，不过，它通过 ajax 替换内容并按指定添加 is-exiting class。

Answer 2

据我所知，您缺少 CSS 动画，并且有一半时间我在 jquery.smoothState.js 上收到 404。

我确定 Bootstrap 与它没有任何关系，因为我正在使用 Bootstrap 制作一个带有过渡和背景图片的网站，与您类似，而且我有它正在运行。

如果您愿意，欢迎您查看代码，我已尽我所能： http://alex-oconnell.com/client/aarmour/

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

Does smoothstate.js not work with different background images?

html

css

twitter-bootstrap

reveal.js

smoothstate.js