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

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

---

希望这有帮助！

参考