Question

我使用的是smoothStates默认设置，我想知道是否可以在主包装中添加一个类，以便我可以更改网站的背景颜色？我不想在main下添加另一个div作为它的额外标记。

目前我只能添加页面索引，然后其他页面不会改变，因为smoothState不会再次加载页面。

编辑：所以我想为每个页面添加一个类，例如：page-index，page-about等等。

我有一个像这样的div：

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

点击/ news：

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

Answer 1

要实现您的目标，您可以使用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

smoothState.js：将类添加到#main包装器

1 个答案: