Eine kurze Analyse, wie Vue Animationseffekte erzielt

Wie erzielt man einen Animationseffekt in Vue? Der folgende Artikel gibt Ihnen einen kurzen Einblick in die in Vue gekapselten Übergänge und Animationen. Ich hoffe, er wird Ihnen hilfreich sein!

Vue-gekapselte Übergänge und Animationen

1. Funktion

Fügen Sie beim Einfügen, Aktualisieren und Entfernen von DOM-Elementen gegebenenfalls Stilklassennamen hinzu. 2. Schreibmethode

erforderlich Zuerst gibt es dieses annimate.css

<template>
  <div>
    <button @click="isShow = !isShow">隐藏展示</button>
    <transition name="hidden" appear>
      <h1 v-show="isShow">隐藏展示</h1>
    </transition>
  </div>
</template>
<script>
export default {
  name: "Test",
  data() {
    return {
      isShow: true
    };
  }
};
</script>
<style scoped>
h1 {
  background-color: orange;
}
.hidden-enter-active {
  animation: shanyu 1s;
}
.hidden-leave-active {
  animation: shanyu 1s reverse;
}
@keyframes shanyu {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0px);
  }
}
</style>

1.v-Thyth: Der Ausgangspunkt der Eingabe

2.v-ERTER-Active: Während des Eingabevorgangs 3.v- ENTER-TO: Ende

npm i animate.css

E

Stil der Elemente beim Verlassen:

1.V-leave: der Ausgangspunkt des Verlassens2.V-leave-active: im Prozess des Verlassens

3.V-leave-to : der Endpunkt des Verlassens

4.Verwenden Sie 9324f33a692dc6b70abc93655ea5d97e Wickeln Sie das zu übertragende Element ein und konfigurieren Sie das Namensattribut

<template>
  <div>
    <button @click="isShow = !isShow">隐藏展示</button>
    <transition-group name="shanyu" appear>
      <h1 v-show="isShow" key = &#39;1&#39;>隐藏展示</h1>
      <h1 v-show="isShow" key = &#39;2&#39;>隐藏展示</h1>
    </transition-group>
  </div>
</template>
<script>
export default {
  name: "Test2",
  data() {
    return {
      isShow: true
    };
  }
};
</script>
<style scoped>
h1 {
  background-color: rgb(139, 37, 255);
}
/* 进入的起点，离开的起点 */
.shanyu-enter,
.shanyu-leave-to {
  transform: translateX(-100%);
}
.shanyu-enter-active,.shanyu-leave-active{
  transition: .5s linear;
}
/* 进入的终点离开的终点 */
.shanyu-enter-to,
.shanyu-leave {
  transform: translateX(0);
}
</style>

Hinweis: Wenn mehrere Elemente überführt werden müssen, müssen Sie Folgendes verwenden: ee7d2384390f182d69099c59c6c1c37a und jedes Element muss einen Schlüsselwert angeben.

<transitionname="hello">
    <h1v-show=" isShow">你好啊! </h1>
</transition>

(Teilen von Lernvideos:

Vuejs-Einführungs-Tutorial

,

Grundlegendes Programmiervideo

)

Das obige ist der detaillierte Inhalt vonEine kurze Analyse, wie Vue Animationseffekte erzielt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!