Eine kurze Analyse, wie Vue Animationseffekte erzielt

青灯夜游

Freigeben： 2023-02-01 19:55:12

nach vorne

2016 Leute haben es durchsucht

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!

Eine kurze Analyse, wie Vue Animationseffekte erzielt

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>

Nach dem Login kopieren

1.v-Thyth: Der Ausgangspunkt der Eingabe

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

npm i animate.css

Nach dem Login kopieren

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 < Transition> 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>

Nach dem Login kopieren

Eine kurze Analyse, wie Vue Animationseffekte erzielt

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

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

Nach dem Login kopieren

(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!