Q&A
ご提示のコードでは、コンポーネントがどうなっているか全くわからないので、たとえばブラウザ上に展開されたDOMをご提示いただいた方が解決につながりそうな気がします。
vue3でSPAを制作しています。
v-showやv-ifで切り替え表示したコンポーネントの表示にに対してtransitionをかけるため以下のようなコードを書きました。
・表示されなくなる時
・表示される時
に透明度が変わっていくことを意図したコードです。
Vue.js
1<template> 2 <transition name="message" tag="div"> 3 <TopPage v-if="toppage" @click="toppagecheck" /> 4 <div v-else> 5 <MyHeader v-show="header" @check="checkheader" /> 6 <Home v-show="home" /> 7 <About v-show="about" /> 8 <Works v-show="works" /> 9 <Books v-show="books" /> 10 <Contact v-show="contact" /> 11 </div> 12 </transition> 13</template> 14 15<style lang="sass" scoped> 16.message 17 &-enter 18 &-from 19 opacity: 0 20 &-to 21 opacity: 1 22 &-active 23 opacity: 0 24 transition: all 1500ms ease 25 26 &-leave 27 &-from 28 opacity: 1 29 &-to 30 opacity: 0 31 &-active 32 transition: all 1000ms ease 33</style>
【追記】
ブラウザ上での表示はこうなっていました。
初期画面時
html
1<html lang> 2 <head></head> 3 <body> 4 <noscript></noscript> 5 <div id="app" data-v-app> 6 <div class="TopPage" tag="div" data-v-7ba5bd90> 7 <p class="click abs">DoubleClick</p> 8 <h1 class="abs"> 9 <br> 10 "Website" 11 </h1> 12 <div class="gradientCircle abs"></div> 13 <img /> 14 </div> 15 </div> 16 </body> 17 </html>
遷移時
html
1<html lang> 2 <head></head> 3 <body> 4 <noscript></noscript> 5 <div id="app" data-v-app> 6 <div class="TopPage message-leave-active message-leave-to" tag="div" data-v-7ba5bd90> 7 <p class="click abs">DoubleClick</p> 8 <h1 class="abs"> 9 <br> 10 "Website" 11 </h1> 12 <div class="gradientCircle abs"></div> 13 <img /> 14 </div> 15 <div tag="div" data-vba5bd90 class="message-enter-active message-enter-to"> 16 </div> 17 </body> 18 </html>
遷移後
html
1<html lang> 2 <head></head> 3 <body> 4 <noscript></noscript> 5 <div id="app" data-v-app> 6 <div tag="div" data-vba5bd90 class>...</div> 7 </div> 8 </body> 9</html>
上記の移り変わりがわかりにくそうだったので画面録画をyoutubeに載せました
こちらからご覧いただけるとありがたいです。
上記のコードでは<TopPage>のleave時以外にはtransitionが効いているように見えませんでした。
Vue3のドキュメントを見たのですが解決に至らなかったため教えていただきたいです
エラーメッセージは出ていません
失礼しました。
DOMの遷移について追記させていただきました。
遷移ということは、SPAですか？
そうです。
コンポーネント間の表示を切り替える際にアニメーションを適用させたいと考えています
動画ではよくわからないのですが、一瞬だけfromになってる、ということでいいですか？
動画でいう2枚目のページが現れる際にopacity0→1のアニメーションが適応されないという悩みです。
いえ、そういうことを聞いているのではなくて、トランジションを発生させている方法は動画ではよくわからないけど一瞬だけfromになってる、ということでいいですか？ ということです。
申し訳ありません。質問が理解できていないです。
どのページが一瞬fromになっているということでしょうか？
1枚目のページの"leave"に関してはopacityが綺麗に変化していると思うので一瞬だけfromになっているということはないと思います。
2枚目のページの"enter"に関しては一切アニメーションが適応されていないと思うのでfromにもなっていないと思います。
伝わっていないかもしれないですが、from とは .message-enter-from のことです。
https://v3.ja.vuejs.org/guide/transitions-enterleave.html
ドキュメントを読んできました。やはり一瞬だけ from が挟まるのですね。理解しました。
単純なコンポーネントで試してみましたが、回答の様にopacityを削除することで動作するようです。
それで動作しないということは、おそらく SPA での問題かと思うので、Vue CLI の SPA に詳しい別のご回答者をお待ちになった方がよさそうですね。
わざわざ試してまでいただき有難うございます。
説明が拙くお手数をおかけし申し訳ありませんでした。
ご協力有難うございました
回答2件
0
自己解決
解決しました。
画面切り替えの処理とclass切り替えの処理が同時に行われていないため、画面下に次の画面が表示されてしまっている状態で両画面のトランジションが起きてしまっていました。
そのため前画面がトランジションしている間に下画面のトランジションが終わってしまっている状態でした。
投稿2021/06/03 14:23
総合スコア2
0
推測での回答になってしまいますが、こうするとどうでしょうか。
SASS
1.message 2 &-enter 3 &-from 4 opacity: 0 5 &-to 6 opacity: 1 7 &-active 8 //opacity: 0 9 transition: all 1500ms ease
投稿2021/06/03 04:03
総合スコア36960
あなたの回答
tips
プレビュー
