smoothState.js：將類添加到#main包裝

我使用的是smoothStates默認設置，我想知道是否可以將類添加到主包裝中，以便我可以更改網站的背景顏色？我不想在main下添加另一個div作爲其額外的標記。smoothState.js：將類添加到#main包裝

目前我只能添加頁面索引，然後其他頁面不會改變，因爲smoothState不會再次加載頁面。

編輯：所以我想補充一類的每一頁，如：page-index，page-about等。

我有一個div像這樣：

<div id="main"> 
// stuff here 
</div>

當你點擊/新聞：

<div id="main" class="page-news"> 
// stuff here 
</div>

我的功能：

$(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'); 
});

來源

2017-03-20 Emma Stone

什麼時候你想添加類？之前，之前，在動畫中間？ – jonhue

嗨，從人們訪問主頁開始。 –

你是什麼意思？所有動畫完成後？ – jonhue

要達到您想要的效果，您可以使用onAfter。

將新內容注入頁面並且所有動畫完成時運行的函數。這是何時重新初始化頁面所需的任何插件。

創建一個函數：

function addClass() { 
    $('#main').addClass('your_class second_class'); 
};

然後注入到你的smoothState初始化此：

$(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); 

    } 
    }, 
    onAfter: function($container, $newContent) { 
    addClass(); 
    } 
}, 
smoothState = $('#main').smoothState(options).data('smoothState'); 
});

更新：如何動態地設置類：

<!-- HTML --> 
<div id="cms-classes" class="Put your classes in here"> 
</p> 

/* CSS */ 
#cms-classes { display: none } 

// JavaScript 
function addClass() { 
    cmsClasses = $('#cms-classes').attr('class'); 
    $('#main').addClass(cmsClasses); 
};

希望這有助於！

Reference

來源

2017-03-20 19:00:41 jonhue

對不起，這是我已經有？ –

@EmmaStone對不起，我不知道爲什麼我把我的答案從'onAfter'更改爲'onReady' :) – jonhue

不用擔心@jonhue :)我會在明天嘗試代碼示例，當你說：「.addClass（'your_class second_class'）;」我不知道所有的班級，因爲班級名稱來自我正在從事的CMS ...它能否看到是否有類更改，然後將該更改添加到新的頁面加載？我是新手，請原諒這些愚蠢的問題:) –

smoothState.js：將類添加到#main包裝

回答

相關問題