vue-scrollmagicの不可解な使用について
解決したいこと
vue-scrollmagicをnuxtjsで実装した際の理解不能なことが起こります。
原因が分かる方がいたら、教えていただきたいです。
'npm run build' & 'npm run start' すると、vue-scrollmagicが動作しなくなります。最初はpluginが正常に読み込まれていないかと考えていましたが、これは違いました。
まずは~/pages/index.vueの一つ下の階層のHome.vueを紹介します。
こちらのテンプレートタグの中ではvue-scrollmagicを使用しているコンポーネントと使用していないコンポーネントがあります。
使用しているのは sec2,sec3,sec4,Footerのコンポーネントです。
該当するソースコード
~/components/pages/Home.vue
<template>
<div>
<Header />
<Sec1 />
<Sec2 />
<Sec3 :menus="menus" :otherMenus="otherMenus" />
<Sec4 />
<img-wrapper />
<Footer />
</div>
</template>
<script>
import {
Header,
Footer,
Sec1,
Sec2,
Sec3,
Sec4,
ImgWrapper,
} from "~/components/templates";
export default {
components: {
Header,
Footer,
Sec1,
Sec2,
Sec3,
Sec4,
ImgWrapper,
},
props: ["menus", "otherMenus"],
name: "App",
};
</script>
動作しない原因は不明ですが、正常に動作する条件？のようなものがあります。
下記のパターンですと動作します。
1.vue-scrollmagicを使用しているコンポーネントを一つだけ残した場合。(例：sec2のみで他は消す)
2.vue-scrollmagicを使用しているコンポーネントと不使用のコンポーネントをそれぞれ一つずつのみ残す時(例：sec1 + sec2,)にそれぞれのsectionタグの中に'
3.vue-scrollmagicを使用したコンポーネントを２つだけ残した時(例：sec2 + sec3,)にどちらか１つのコンポーネントに''を追加した場合。
下記はsec1とsec2のコードです。
sec1.vue
//このコンポーネントはvue-scrollmacgicを不使用
<template>
<section class="sec01">
<div /> // <- こちらの一見無意味なタグを追加
<div class="sec01-container">
<div class="sec01-inner">
<Sec01Main />
<Sec01Bottom />
</div>
</div>
</section>
</template>
<script>
import Sec01Main from "../molecules/main/sec01/Sec01Main.vue";
import Sec01Bottom from "../molecules/main/sec01/Sec01Bottom.vue";
export default {
components: {
Sec01Main,
Sec01Bottom,
},
};
</script>
sec2.vue
//このコンポーネントはvue-scrollmacgicを使用
<template>
<section class="sec02">
<div /> // <- こちらの一見無意味なタグを追加
<div class="sec02-container">
<div class="sec02-inner">
<sec-02-content /> // vue-scrollmagicを使用したコンポーネント
<sec-02-title /> // vue-scrollmagicを使用したコンポーネント
<sec-02-image />
</div>
</div>
</section>
</template>
<script>
import {Sec02Content, Sec02Image, Sec02Title} from "~/components/molecules/main/sec02";
import Sample02 from '~/components/molecules/main/sec02/Sample02';
export default {
components: { Sec02Content, Sec02Image, Sec02Title, Sample02},
};
</script>
sec2だけでなくsec3,sec4,Footerのコンポーネントでvue-scrollmagicを使用していますが、構成はsec2とほぼ同じです。
長文になってしまいまいたが、なぜ'
'を適当に追加すると動作するのか原因の検討が全くつかないです。このようなことが起こった事がある方がいましたら、是非意見をいただきたいです。
0