Vue.jsのtransitionでenterのアニメーションが適用されない【Vue3】

ハンバーガーメニュークリックでモーダルが表示される仕様を作成しようとし、下記コードを記述しました。

<template>
  <div>
      <div class="menu_btn" @click="ActiveBtn = !ActiveBtn">
        <span class="line_01"></span>
        <span class="line_02"></span>
        <span class="line_03"></span>
      </div>
      <transition name="menu" appear>
        <Menubar v-if="ActiveBtn" class="menu" />
      </transition>
  </div>
</template>

<script>
export default {
data() {
    return {
      ActiveBtn: false,
    };
  },
};
</script>

<style lang="scss" scoped>
// アニメーションCSS ハンバーガーメニューのCSSは割愛
.menu-enter-active,
.menu-leave-active {
  transition: all 0.4s;
}
.menu-enter,
.menu-leave-to {
  opacity: 0;
}
.menu-enter-to,
.menu-leave {
  opacity: 1;
}
</style>

ハンバーガーメニューをクリックするとふわっと現れ、
もう一度クリックするとふわっと消えるようにしたかったのですが、
どうもふわっと現れる方（enter）の方のアニメーションが適用されません。

こちらの記事を参考にし、appear属性が入っていなかったのでtransitionに追加してみましたが、
特に変化はありませんでした。
Vue.js の enter トランジション/アニメーションが適用されない

解決策

Vue3だと、enterのアニメーションCSSの記述が、下記に変更になったようです。

Vue2
v-enter

↓

Vue3
v-enter-from

これでenterのアニメーションも適用されました！！
かなり詰まったので残しておきます。。

参考サイト

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