Question

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

这是我的代码。我也尝试过reveal.js，尽管这有点不同，我只需要加入平滑过渡。

非常感谢任何帮助。

＆＃13;

$(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');
});

＆＃13;

.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;
}

＆＃13;

    <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>

＆＃13;

Answer 1

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

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

Answer 2

据我所见，您错过了CSS动画，有一半时间我在jquery.smoothState.js上获得了404。

我确信Bootstrap与它没有任何关系，因为我正在使用Bootstrap制作一个包含过渡和背景图片的网站，与您类似，我让它运转正常

如果您愿意，欢迎查看代码，我可以将其记录在案： http://alex-oconnell.com/client/aarmour/

smoothstate.js不能用于不同的背景图像吗？

2 个答案: