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包装

回答

相关问题