用smoothState.js更改背景色

Question

我有一个5页的测试站点，每个页面都有不同的背景颜色，取决于您所在的页面。

当我使用smoothState.js附带的默认设置时，背景色不会刷新，因为它被设置为页面正文，如果我按F5键，我会看到页面的颜色。是否可以根据使用smoothState.js的页面来更改背景色？

smoothState.js选项：

$(function(){
  'use strict';
  var options = {
    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 = $('#main').smoothState(options).data('smoothState');
});

CSS:

.home{
  background-color: #000000;
}

.about{
  background-color: #efefef;
}

.faq{
  background-color: #999999;
}

.prices{
  background-color: #666666;
}

.contact{
  background-color: #333333;
}

Answer 1

您可以在smoothState容器元素而不是主体上使用css类。然后可以使用onAfter选项。它运行后，新的内容已注入到页面和所有动画完成。使用Jquery，您可以搜索是否有某个css类，如果有，可以更改主体的css。

简言之：

    onAfter: function() {
        if ($('.container').hasClass('home')) {
                $('body').css('background-color', '#000000');
        }
    }

就你的具体情况而言：

1. 将您的css类添加到相应的smoothState容器元素：
2. 检查容器是否有特定的类，然后将背景色应用于主体。对所有页面重复，并将其添加到onAfter中的smoothState选项中： onAfter:函数(){ if ($('.container').hasClass('home')) {$(‘body’).css(‘背景色’，'#000000')；} if ($(‘.container’).hasClass(‘about’){$(‘body’).css(‘背景色’，'#efefef')；}如果($(‘.container’).hasClass(‘faq’){$(‘body’).css(‘背景颜色’，'#999999')；} //等}

确保从您的body元素中删除css类，因为否则smoothState仍然会记住您访问的所有其他页面的第一个页面的类。您也可以摆脱css规则。

如果用户已经停用了JavaScript，那么所有这些都不能工作。简单地把这样的东西放在每一页的头上。这样它就不会干扰smoothState：

    <!-- home.html -->
    <noscript>
        <style type="text/css">
            body {
                background-color: #000000;
            }
        </style>
    </noscript>

    <!-- about.html -->
    <noscript>
        <style type="text/css">
            body {
                background-color: #efefef;
            }
        </style>
    </noscript>

    <!-- etc. -->