一番簡単のは「namespace」と「transitionCompleted」のイベントで使用するようになります。
Live Demo
例:
foo.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ページ1:foo</title>
</head>
<body class="foo">
<div id="barba-wrapper">
<div class="barba-container" data-namespace="foo">
<h1>ページ1:foo</h1>
<p>Lorem Ipsum</p>
<p><a href="bar.html">ページ2へ</a></p>
</div>
</div>
<script src="//cdn.jsdelivr.net/jquery/3.2.1/jquery.js"></script>
<script src="//cdn.jsdelivr.net/barba.js/1.0.0/barba.js"></script>
<script src="test_classname.js"></script>
</body>
</html>
bar.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ページ2:bar</title>
</head>
<body class="bar">
<div id="barba-wrapper">
<div class="barba-container" data-namespace="bar">
<h1>ページ2:bar</h1>
<p>Lorem Ipsum</p>
<p><a href="foo.html">ページ1へ</a></p>
</div>
</div>
<script src="//cdn.jsdelivr.net/jquery/3.2.1/jquery.js"></script>
<script src="//cdn.jsdelivr.net/barba.js/1.0.0/barba.js"></script>
<script src="test_classname.js"></script>
</body>
</html>
test_classname.js
Barba.Dispatcher.on( 'transitionCompleted', function( currentStatus, prevStatus ) {
var $body = $( 'body' );
if ( prevStatus && prevStatus.namespace ) {
if ( ! currentStatus
|| ( currentStatus.namespace && currentStatus.namespace !== prevStatus.namespace ) ) {
$body.removeClass( prevStatus.namespace );
}
}
if ( currentStatus && currentStatus.namespace ) {
$body.addClass( currentStatus.namespace );
}
});
Barba.Pjax.start();
jQueryなしでVanillaJSの場合は:
document.body.className = document.body.className.replace( prevStatus.namespace, '' );
document.body.className += ' ' + currentStatus.namespace;