Vue2-Animation – ausblenden und nach rechts schieben, nachdem die Komponente nach links verschoben wurde

Vue2-Animation – ausblenden und nach rechts schieben, nachdem die Komponente nach links verschoben wurde

Sie können die Übergangsanimationsfunktion von Vue.js verwenden, um den Versteck- und Anzeigeeffekt von Komponenten zu realisieren. In der Version 2.x von Vue.js können Sie dies mit den folgenden Schritten tun:

1. Stellen Sie zunächst sicher, dass Sie Vue.js und die zugehörigen Abhängigkeiten installiert haben. Falls nicht installiert, installieren und importieren Sie bitte zuerst Vue.js.
2. Fügen Sie den Inhalt hinzu, der ausgeblendet und angezeigt werden soll, im Vorlagen-Tag der Komponente.

<template>
  <div>
    <transition name="slide">
      <div class="animated-component" v-if="showComponent">
        <!-- 这里放置需要隐藏和显示的组件或内容 -->
      </div>
    </transition>
  </div>
</template>

3. Definieren Sie CSS für Übergangseffekte im Style-Tag.

<style>
.slide-enter-active {
    
    
  animation: slide-in 0.5s;
}

.slide-leave-active {
    
    
  animation: slide-out 0.5s;
}

@keyframes slide-in {
    
    
  from {
    
    
    transform: translateX(-100%);
  }
  to {
    
    
    transform: translateX(0);
  }
}

@keyframes slide-out {
    
    
  from {
    
    
    transform: translateX(0);
  }
  to {
    
    
    transform: translateX(-100%);
  }
}
</style>

4. Definieren Sie das Datenattribut und die Methodenmethode im Skript-Tag der Komponente.

<script>
export default {
    
    
  data() {
    
    
    return {
    
    
      showComponent: false
    };
  },
  methods: {
    
    
    toggleComponent() {
    
    
      this.showComponent = !this.showComponent;
    }
  }
};
</script>

Wenn Sie nun die Methode toggleComponent aufrufen, wird die Komponente ausgeblendet und mit einer gleitenden Animation angezeigt.

Hinweis: Im obigen Beispiel werden CSS-Animationen verwendet. Sie können auch die von Vue.js bereitgestellten Übergangsklassennamen (z. B.
Fade-Enter, Fade-Enter-Active, Fade-Leave, Fade-Leave-Active) und CSS-Übergangseigenschaften ( (z. B.
Übergang, Animation), um andere Arten von Übergangseffekten zu erzielen.