質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

819閲覧

barba.jsでページ遷移時のアニメーションについて

okpk

総合スコア38

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2019/05/17 02:44

barba.jsを使用してページ遷移時にアニメーションをつけたいです。

別ページ遷移時に現在のページをフェードアウトさせ、遷移先をフェードインしながら表示したいのですが、
クリックした時点でbarba-containerに遷移時のdomに切り替わるため、真っ白く表示され現在のページのフェードアウトさせていくtransitionが効かないため、アニメーションできません。

barbaにオプションなどあるのか..等どのように実装すればよいかアドバイスをいただけると幸いです。

INDEXpug

1main(data-barba="container" data-barba-namespace="index") 2 p top page

ABOUTpug

1main(data-barba="container" data-barba-namespace="about") 2 p about page

Javascript

1barba.init({ 2 transitions:[ 3 leave(){ 4 $("html").addClass("transition-class"); 5 }, 6 enter(){ 7 const endTransition = () =>{$("html").removeClass("transition-class")} 8 setTimeout(endTransition,1500); 9 } 10 ] 11})

現状このようなコードです。
htmlにclassを付与し、classが付与されているmain要素にtransitionのcssを書いています。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

barba.js fade in fade out などで検索をすると、いろいろなサンプルページが見つかります。
これらの実装を参照してはいかがでしょうか。
https://qiita.com/NomuraS/items/29b72c9b12993154f91c
https://linuxnosusume.blogspot.com/2018/01/barbajsanimejs.html

投稿2019/05/17 06:28

mar-kn

総合スコア306

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問