Vue.jsで下からフェードインして表示されるようなアニメーションを付けたい。

Question

前提・実現したいこと

Vue CLIでアンケート画面の作成をしています。

今回、実装したいことは一つ目の設問のラジオボタン「はい」もしくは「いいえ」が選択された時に
二つ目の設問が下からフェードインするような形で表示させたいです。

発生している問題・エラーメッセージ

アニメーションさせたい部分をtransitionタグで囲みCSSを設定したのですが、
ラジオボタンをクリックすると、ただ表示されるだけの状態になってしまいます（フェードインされない）

該当のソースコード

<template>
  <div>
    <div class="questionnaire-box">
      <div class="questionnaire-box-header">
        <span>STEP2</span>
        <h4>以下にお答えください</h4>
      </div>

      <form class="question-box">
        <p>現在、生命保険に加入されていますか？</p>
        <input type="radio" name="question" value="ok" id="a" v-on:click="change"/>
        <label for="a">はい</label>
        <input type="radio" name="question" value="no" id="b" v-on:click="change"/>
        <label for="b">いいえ</label>
      </form>

　　　　//フェードインで表示させたい部分
      <transition name="fade">
        <form class="question-box" v-if="show">
          <p>現在、入院中ですか。または、最近3ヶ月以内に医師の診察・検査の結果、入院・手術をすすめられたことはありますか？</p>
          <input type="radio" name="question" value="ok" id="c" />
          <label for="c">はい</label>
          <input type="radio" name="question" value="no" id="d" />
          <label for="d">いいえ</label>
        </form>
      </transition>

      <form class="question-box">
        <p>過去５年以内に、病気やけがで、手術をうけたことまたは、継続して７日以上の入院をしたことがありますか？</p>
        <input type="radio" name="question" value="ok" id="e" />
        <label for="e">はい</label>
        <input type="radio" name="question" value="no" id="f" />
        <label for="f">いいえ</label>
      </form>
    </div>

    <div class="page-transition-button">
      <button id="back-btn" class="back-btn">前へ戻る</button>
      <button id="next-btn" class="next-btn">次へ進む</button>
    </div>

  </div>
</template>

<style scoped>
//フェードインのCSS
.fade-enter {
    opacity:0;
    transform: translateY(20px);
}

.fade-enter-active {
    transition:0.5s;
}

.fade-enter-to {
    transform:translateY(0);
}

.questionnaire-box {
  width: 50%;
  margin: 50px auto;
  border: 1px solid #00ffc0;
  border-radius: 3px;
}

.question-box:nth-child(4) {
  margin-bottom: 20px;
}

.questionnaire-box-header {
  display: flex;
  background-color: rgba(0, 255, 186, 0.3);
}

.questionnaire-box-header > span {
  width: 11%;
  height: 22px;
  line-height: 22px;
  text-align: center;
  color: #fff;
  font-size: 12px;
  background-color: #1798da;
  border-radius: 3px;
}

.questionnaire-box-header > h4 {
  width: 37%;
  margin: 0 auto;
  padding: 10px;
  color: #565f5f;
  font-weight: normal;
}

.question-box {
  padding: 0 10px;
}

.question-box > p {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #4eaee0;
}

.next-btn,
.back-btn {
  position: relative;
  display: block;
  text-align: center;
  margin-right: 25px;
  padding: 10px;
  width: 150px;
  color: #fff;
  background-color: #0fe7a2;
  border: none;
  border-radius: 3px;
  letter-spacing: 1px;
}

.next-btn::after,
.back-btn::after {
  content: "";
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  margin-top: -3.5px;
  height: 7px;
  width: 7px;
  position: absolute;
  top: 19px;
  left: 125px;
  transform: rotate(45deg);
}

.page-transition-button {
  display: flex;
  justify-content: center;
}
</style>

<script>
export default {
  data() {
    return {
        show:false
    };
  },
  methods: {
      change:function() {
          this.show = true;
      }
  }
};
</script>

試したこと

試しにtransitionタグにappearを付けてみたのですが、特に変化はありませんでした。

原因がわからず先に進めない状況となっております。
ご教授いただけると幸いです????‍♂️

デベロッパーツールで確認したところ

.fade-enter-active {
    transition:0.5s;
}

.fade-enter-to {
    transform:translateY(0);
}

は適用されてるみたいなのですが、

.fade-enter {
    opacity:0;
    transform: translateY(20px);
}

は適用されてないみたいです。

--追記--
script直接組み込み挙動を確認したところ下からフェードインする形で表示されました。
現在VueCLIでの開発をしているのですが、VueCLIだと何故フェードインする形で表示されないのかが疑問なので、もし分かる方がいらっしゃったらご教授いただければと思います????‍♂️

--追記--
Vue2で新しくプロジェクトを作成して同じようにコンポーネントを作って実装してみたところしたからフェードインする形で表示されました。

ただ、Vue3だと同じようにはならないのは何故なのか？分かる方がいれば教えていただきたいです????‍♂️

Answer 1

こちらの問題解決しました。

バージョンによってv-enterの表記の仕方が違うみたいです。

Vue2
v-enter

Vue3
v-enter-from

↑バージョンでこのように変わります。

Answer 2

こんばんは。

CSSのコメントは/* */です。

<style scoped>
//フェードインのCSS /* ←ここで文法エラー */
.fade-enter {

コメント - CSS: カスケーディングスタイルシート | MDN

Comments

[F_Yohei]

こんばんは！
回答いただきありがとうございます????‍♂️

今、コメントを外して実行してみたのですが状況変わらずでした。。。

[Lhankor_Mhy]

そうでしたか。
ご提示のコードで試したところ、その修正で当方では動作したので、ご提示いただいていない部分のコードが原因かもしれませんね。

[F_Yohei]

コードは間違っていないということですね。。。
下からフェードインするような動きになっているでしょうか？

[Lhankor_Mhy]

そうですね。

[F_Yohei]

わかりました！
ありがとうございます????‍♂️

もう少し探ってみます！

[F_Yohei]

確認したところVueCLIですと上手くいかないみたいです。
script直接組み込みでやってみたところ思っていた通りの挙動になりました。

ですが、VueCLIだと何故フェードインするような動きにならないのかが疑問です。

もし、ご存知でしたらご教授いただければ幸いです????‍♂️

[F_Yohei]

こちら解決しました！

Vue2ではv-enterでいいそうですが、Vue3以降はv-enter-fromが正しいみたいです。

[Lhankor_Mhy]

ご解決されて何よりです。