用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容器元素：

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

2. 检查，如果容器有某个班，然后将背景颜色应用到身体。重复所有网页，并把它添加到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. 
   
   } 
   

确保从你的身体元素中删除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. -->