Das CSS von Vue.js implementiert übermäßige Animationen

Dieses Mal werde ich Ihnen die CSS-Übergangsanimation in Vue.js vorstellen. Was sind die Vorsichtsmaßnahmen in der CSS-Übergangsanimation von Vue.j? Schauen wir uns das gemeinsam an sehen.

Übergang Animation

<template>
  <div>
    <button @click="show = !show">Toggle</button>
    <div class="ab">
      <transition name="adc">
        <p v-show="show">I am show</p>
      </transition>
    </div>
  </div></template><script>
  export default {
    data () {      return {        show: true
      }
    }
  }</script><style>
 .adc-enter-active, .adc-leave-active {   transition: all 2s ease-out;
 }  .adc-enter, .adc-leave-to {    opacity: 0;
  }</style>

CSS-Transformationsanimation

<template>  <div>    <button @click="show = !show">Toggle</button>    <div class="ab">      <transition name="my-trans">        <p v-show="show">I am show</p>      </transition>    </div>  </div></template><script>  export default {    data () {      return {        show: true      }    }  }</script><style>  .my-trans-enter-active, .my-trans-leave-active {    transition: all .5s ease-out;  }  .my-trans-enter {    transform: translateY(-100px);    opacity: 0;  }  .my-trans-leave-active {    transform: translateY(100px);  }</style>

CSS-Transformationsanimation

dynamische Komponente

<template>
  <div>
    <button @click="onToggle">Toggle</button>
    <div class="ab">
      <transition name="fade">
        //动态组件        <div :is="componentView"></div>
      </transition>
    </div>
  </div></template><script>
  import comA from &#39;./components/a.vue&#39;
  import comB from &#39;./components/b.vue&#39;
  export default {    components: {comA, comB},
    data () {      return {        componentView: &#39;com-a&#39;
      }
    },    methods: {
      onToggle () {        if (this.componentView === &#39;com-a&#39;) {          this.componentView = &#39;com-b&#39;
        } else {          this.componentView = &#39;com-a&#39;
        }
      }
    }
  }</script><style>
 .fade-enter-active, .fade-leave-active {   transition: all 2s ease-out;
 }  .fade-enter, .fade-leave-to {    opacity: 0;
  }</style>

Dynamische Komponenten, Modus ist der Standard

Die gleichzeitig wirksamen Eingangs- und Ausgangsübergänge können nicht alle Anforderungen erfüllen, daher bietet Vue einen Übergangsmodus
in-out: Der Übergang neuer Elemente erfolgt zuerst, das aktuelle Element verschwindet nach Abschluss.
out-in: Das aktuelle Element geht zuerst über und dann geht das neue Element hinein.
Die Standardeinstellung ist „in-out“

Die obige Animation, wenn der Modus „out-in“ eingestellt ist

<transition name="fade" mode="out-in">   <div :is="componentView"></div></transition>
mode="out-in"

Hinweis: Wenn die beiden Tag-Namen gleich sind, ist dies der Fall nicht ausgeführt werden. Wenn Sie eine Animation ausführen möchten, müssen Sie unterschiedliche Schlüssel für die Tags festlegen, um sie zu unterscheiden.

<template>
  <div>
    <button @click="show = !show">Toggle</button>
    <div class="ab">
      <transition name="fade" mode="out-in">
        <p v-if="show" >i am show</p>
        <p v-else >not in show</p>
      </transition>
    </div>
  </div></template>

Bei zwei Animationen mit demselben Tag-Namen werden keine unterschiedlichen Schlüssel festgelegt

Wenn sie anders eingestellt sind, können Sie die Animation ausführen

<template>
  <div>
    <button @click="show = !show">Toggle</button>
    <div class="ab">
      <transition name="fade" mode="out-in">
        //设置不同的key        <p v-if="show" key="1">i am show</p>
        <p v-else key="2">not in show</p>
      </transition>
    </div>
  </div></template>

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Berechnete Eigenschaften und Datenüberwachung von Vue.js

Vue.js-Ereignisbindung - integrierte Ereignisbindung, benutzerdefinierte Ereignisbindung

Das obige ist der detaillierte Inhalt vonDas CSS von Vue.js implementiert übermäßige Animationen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!