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を書いています。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。