概要
Vue.jsで画面遷移時のトランジションアニメーション実装してみようってことで、
<transition>タグのイベントフックとgsapを使って、動作検証してみることに。
（導入メモはこちら）
serveでコンパイルしていたプレビューではうまくトランジションアニメーションしていたのに、
buildでコンパイルしたものを確認すると・・動いてない・・だと！
ライブプレビューの罠。
エラー内容
コンソールには下記のエラー
Invalid scaleY tween of 0 Missing plugin? gsap.registerPlugin()
同じようなことを質問している人はいるみたいだが・・
https://greensock.com/forums/topic/21874-invalid-scaley-tween-of-0-missing-plugin-gsapregisterplugin/
地味にハマったので、解決法を書いておきます。
画面遷移時トランジション ソース（Before）※エラー出て動かないver
# App.vue
<template>
<div id="app" class="l-app">
<transition v-on:enter="enter" v-on:leave="leave" v-bind:css="false">
<router-view />
</transition>
<Gnav />
</div>
</template>
<script>
import Gnav from '@/components/Gnav.vue'
import { TimelineMax, TweenMax, Power4 } from 'gsap'
export default {
components: {
Gnav,
},
methods: {
enter(el, done) {
const tl = new TimelineMax({
onComplete: done
})
tl.set(el, {
y: window.innerWidth * 1.5,
scale: 0.8,
transformOrigin: '50% 50%'
})
tl.to(el, 0.5, {
y: 0,
ease: Power4.easeOut
})
tl.to(el, 1, {
scale: 1,
ease: Power4.easeOut
})
},
leave(el, done) {
TweenMax.to(el, 1, {
y: window.innerHeight * 1.5,
ease: Power4.easeOut,
onComplete: done
})
}
}
}
</script>
・・・特にトリッキーなことは・・してないと思うのだが・・・
Missing Pluginっていうのをヒントにつぶしていきました。
【原因】gsapの書き方間違い
importの仕方が悪いのか？と思い、gsapのサイトを改めて確認。
すると、どうやら、gsap(v3)ではモジュールの呼び出し方も、メソッドの書き方も変わってる・・・！
▼v3公式リリース
https://greensock.com/3-release-notes
アナウンス通りに書きなおしてみると・・・動いたーー
画面遷移時トランジション ソース（After）※修正して動いたver
<script>
import gsap from 'gsap'
export default {
methods: {
enter: function(el, done) {
let tl = gsap.timeline({ //Timelineの生成の書き方変わった！
onComplete: done
})
tl.set(el, {
y: window.innerWidth * 1.5,
scale: 0.8,
transformOrigin: '50% 50%'
})
tl.to(el, {
duration: 0.4, //durationも中に！
y: 0,
ease: 'power4.easeout' //easingの書き方も変わった！
})
tl.to(el, {
duration: 0.8,
scale: 1,
ease: 'power4.easeout'
})
},
leave: function(el, done) {
gsap.to(el, { //TweenMax.to() ではない！
duration: 0.8,
y: window.innerHeight * 1.5,
ease: 'power4.easeout',
onComplete: done
})
}
}
}
</script>
というわけで、vue.js特に関係なかったわけですが、
いつまでも昔の書き方で動くと思うなよっていう戒めですね。
気をつけたいと思いました。