Vue-Beispielcode mit dem Animationseffekt „Übergangskomponente“

<Vorlage>
 <div>
  <button @click="anzeigen = !anzeigen">
   Umschalten
  </button>
  <Übergangsname="fadeBg">
   <div class="bg" v-if="show">hallo</div>
  </Übergang>
 </div>
</Vorlage>

<Skript>
 Standard exportieren {
  Daten: () => ({
   zeigen: wahr
  }),
 };
</Skript>

<style lang="less" scoped>
 .fadeBg-enter-active,
 .fadeBg-leave-active {
  Übergang: Deckkraft 0,3 s Leichtigkeit;
 }

 .fadeBg-enter,
 .fadeBg-verlassen-zu {
  Deckkraft: 0;
 }

 .bg {
  Position: fest;
  oben: 20px;
  links: 0;
  Z-Index: 105;
  Breite: 100 %;
  Höhe: 100%;
  Hintergrund: rgba(0, 0, 0, 0,5);
 }
</Stil>