トランジションコンポーネントのアニメーション効果を使用した Vue サンプルコード

<テンプレート>
 <div>
  <ボタン @click="表示 = !表示">
   トグル
  </ボタン>
  <トランジション名="fadeBg">
   <div class="bg" v-if="show">こんにちは</div>
  </トランジション>
 </div>
</テンプレート>

<スクリプト>
 エクスポートデフォルト{
  データ: () => ({
   表示: 真
  }）、
 };
</スクリプト>

<style lang="less" スコープ>
 .fadeBg-enter-active、
 .fadeBg-leave-active {
  遷移: 不透明度 0.3 秒、緩和;
 }

 .fadeBg-enter、
 .fadeBg-leave-to {
  不透明度: 0;
 }

 .bg {
  位置: 固定;
  上: 20px;
  左: 0;
  zインデックス: 105;
  幅: 100%;
  高さ: 100%;
  背景: rgba(0, 0, 0, 0.5);
 }
</スタイル>