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容器元素而不是body上使用css类。然后您可以使用onAfter选项。它在将新内容注入页面并且所有动画完成后运行。使用Jquery，您可以搜索是否存在某个css类，如果是，则更改正文的css。

简而言之：

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

在您的特定情况下：

将您的css类添加到相应的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. -->

检查容器是否具有某个类，然后将背景颜色应用于正文。重复所有页面并将其添加到onAfter中的smoothState选项中：

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类，否则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. -->

使用smoothState.js更改背景颜色

1 个答案: