使用 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 classes。然后你可以使用 onAfter 选项。它在新内容被注入页面并且所有动画都完成后运行。使用 Jquery 你可以搜索是否有某个 css class 如果有则更改正文的 css。

简而言之：

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

在您的特定情况下：

将您的 css classes 添加到相应的 smoothState 容器元素中：

<div class="container scene_element scene_element--animation home">

<div class="container scene_element scene_element--animation about">

<div class="container scene_element scene_element--animation faq">

<!-- etc. -->

检查容器是否有一定的class然后给body应用背景色。对所有页面重复并将其添加到 smoothState 选项中的 onAfter：

onAfter: function() {

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

    if ($('.container').hasClass('about')) {
            $('body').css('background-color', '#efefef');
    }

    if ($('.container').hasClass('faq')) {
            $('body').css('background-color', '#999999');
    }

    // etc.

}

确保从您的 body 元素中删除 css class，否则 smoothState 仍会记住您访问的所有其他页面的第一个页面的 class。您还可以摆脱 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. -->

使用 smoothState.js 更改背景颜色

Change background colors with smoothState.js

jquery

smoothstate.js