barba.js #189
Comments
ライフサイクルページ遷移のライフサイクル
5から9の間は前のページと次のページが同時にDOM上に存在している。 ※ syncモードの場合はまた異なるので注意 |
例index.html <!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title><script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://unpkg.com/@barba/core"></script>
</head>
<body>
<div data-barba="wrapper">
<div data-barba="container" data-barba-namespace="index">
<a href="next.html">next</a>
</div>
</div>
<script src="script.js"></script>
</body>
</html>next.html <!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/@barba/core"></script>
</head>
<body>
<div data-barba="wrapper">
<div data-barba="container" data-barba-namespace="next">
<a href="index.html">index</a>
</div>
</div>
<script src="script.js"></script>
</body>
</html>script.js barba.init({}); |
Transitionleave - 現在のページを離れるときに実行される barba.init({
transitions: [{
leave() {
// 現在のページを離れるときの処理
},
enter() {
// 次のページに入るときの処理
}
}]
});それぞれの関数は Promise オブジェクトを返すことができる。 const $wrapper = $('[data-barba="wrapper"]');
barba.init({
transitions: [{
leave() {
return new Promise((resolve, reject) => {
$wrapper.animate({opacity: 0}, 1000, () => {resolve()});
});
},
enter() {
$wrapper.animate({opacity: 1}, 1000);
},
}]
});基本的には leave() の実行後 enter() が実行されるが、leave() が Promise を返す場合はその Promise が解決するのを待ってから enter() が実行される。 jQuery の Promise を使っても動作するみたいが、正式にサポートしているかどうかはわからない。 const $wrapper = $('[data-barba="wrapper"]');
barba.init({
transitions: [{
leave() {
return $wrapper.animate({opacity: 0}, 1000).promise();
},
enter() {
$wrapper.animate({opacity: 1}, 1000);
},
}]
}); |
Views個々のページの beforeLeave、afterLeave、beforeEnter、afterEnter を指定する。 |
x-barbaヘッダbarbaによるリクエストには <?php
if (isset($_SERVER['HTTP_X_BARBA'])) {
// barbaによるリクエスト
} else {
// 直接リクエスト
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
https://barba.js.org/
The text was updated successfully, but these errors were encountered: