So implementieren Sie die Ein-/Ausstiegsanimation in Vue

In diesem Artikel wird hauptsächlich der Vue-Animationseffekt vorgestellt. Der Code ist einfach und leicht zu verstehen, sehr gut und hat Referenzwert.

1. Beispielcode

(Hinweis: in Vue-Einzeldatei geschrieben)

<template>
  <p>
    <button v-on:click="show = !show">
      Toggle
    </button>
    <transition name="fade">
      <p v-if="show">hello</p>
    </transition>
  </p>
</template>
<script>
  export default {
    data: function() {
      return {
        show: true
      }
    }
  }
</script>
<style>
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity .5s
  }
  
  .fade-enter,
  .fade-leave-to {
    opacity: 0
  }
</style>

2. Beschreibung

(1) Erfordert ein Übergangs-Tag-Paket.

(2) 6 Klassenstatus

(3) Wirkung:

Das Obige ist Ich habe es für alle zusammengestellt und hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Browser-angehaltene Animation während des Ajax-Synchronisierungsvorgangs (ausführliches Tutorial)

So implementieren Sie Überwachungstextfelder in js Enter die Anzahl der Wörter (ausführliches Tutorial)

Was sind die effizienten Algorithmen in JavaScript

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Ein-/Ausstiegsanimation in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!