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を変更します。要するに

：

1. は、それぞれのsmoothStateコンテナ要素にあなたのCSSクラスを追加します：

   <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: function() { 
        if ($('.container').hasClass('home')) { 
          $('body').css('background-color', '#000000'); 
        } 
       } 
   

   特定のクラスを作成し、背景色をボディに適用します。あなたの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. 
   
   } 
   

そうsmoothStateはまだあなたが訪問する最初のページのクラスを覚えていますので、あなたの体の要素からCSSクラスを削除することを確認してください他のすべてのページについてはあなたはまたあなたの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. -->