Vue.jsでgsapからpropsの値を参照したいです
Q&A
Closed
解決したいこと
gsapのアニメーションオブジェクトから、そのコンポーネントのpropsの値を参照したいです。
gsapのscrollTriggerによるスクロールアニメーションをVue.jsで使用しようと思い、以下のように記述をしました。
gsapのアニメーションは再利用できるようコンポーネント化し、parent.vueでimportしています。
Slide.vueでは、要素が画面内に入ってきたら左から右にスライドして表示されるようにしています。
コンポーネントの再利用性を高めるため、durationの値を親コンポーネントのpropsから受け取れるように、duration: this.durationと記述をしました。
Uncaught TypeError: Cannot read properties of undefined (reading 'duration')
propsで定義しているにも関わらず、undefinedとなってしまいます。
console.log()でpropsを出力したところ1と表示されていたので記述ミスというわけではなさそうです。
該当するソースコード
parent.vue
<template>
<Slide :duration="1">
<h2>Hello World</h2>
</Slide>
</template>
<script>
import slide from "./slide.vue";
export default {
components: { Slide },
};
</script>
Slide.vue
<template>
<transition name="slide" appear @before-enter="beforeEnter">
<slot></slot>
</transition>
</template>
<script>
import gsap from "gsap";
import scrollTrigger from "gsap/ScrollTrigger";
export default {
props: {
duration: {
type: Number,
},
},
methods: {
beforeEnter: (el) => {
gsap.registerPlugin(scrollTrigger);
gsap.fromTo(
el,
{
y: 100,
opacity: 0,
},
{
duration: this.duration, //ここでpropsのdurationを参照したい
y: 0,
opacity: 1,
scrollTrigger: {
trigger: el,
start: "top 90%",
},
}
);
},
},
};
</script>
自分で試したこと
transitionメソッドをenterに変えてみましたが変化はありませんでした。
thisを外したり、${}に入れてみましたが変化はありませんでした。
transition: 1 とすると想定通り動くのでpropsが参照できないこと以外に原因はないと思います。
一度dataでdurationを定義してdataの方を参照するように記述しても同じくundefinedと表示されてしまいました。
使用しているのは
vue: 3.2.13
gsap: 3.11.4
です。
お力をお貸し頂けると幸いです。
どうぞよろしくお願い致します。
0
