transitionが上手くいかない理由
VuePressのコンテンツを構成しているテンプレートはPage.vueとHome.vueになります。
Layout.vueの以下の箇所に<transition>
を追加してもPage.vue <-> Home.vue間では有効ですが、Page.vue<->Page.vueでは効きません。
WARNING
以下の方法で実装するとページ内リンクでもアニメーションが開始します。
遷移前と遷移後に実行する
VuePressもVueRouterを使用しています。
VueRouterであれば、遷移前にbeforeResolve
、遷移後にafterEach
を`を使用します。
mounted () {
this.$router.beforeResolve((to, from, next) => {
this.entered = true
next()
})
this.$router.afterEach((to, from, next) => {
setTimeout( () => {
this.entered = false
}, 1500);
})
}
dataにentered、watchで変化をチェックし、enter(),leave()を実行してます。 必要コードのみ抽出したものが以下のコードになります。
data () {
return {
entered: false,
}
},
watch: {
entered: function () {
this.entered ? this.enter() : this.leave()
}
},
mounted () {
this.$router.beforeResolve((to, from, next) => {
this.entered = true
next()
})
this.$router.afterEach((to, from, next) => {
setTimeout( () => {
this.entered = false
}, 1500);
})
},
methods: {
enter () {
// window.alert("遷移前のアニメーション");
},
leave () {
// window.alert("遷移後のアニメーション");
}
}
あとはお好きなアニメーションを
Canvasを使うもよし、css animationだけで頑張るもよし、TweenMaxで派手にするのもよし。 SPAなのでページ遷移を高速で行ってもアニメーションが連続してるのがいいですね〜。