So implementieren Sie das Scroll-Ereignis in Vue mit Animationseffekten

Anforderung: Wenn wir die Seite herunterziehen möchten und dann oben einige Meldungen zur Implementierung angezeigt werden, denken Sie zuerst daran, das Scroll-Ereignis der Seite zu verwenden, und überlegen Sie dann, wo das Ereignis geschrieben werden soll. Es gibt nicht viel zu sagen, schauen Sie sich den Code an

<template>
  <p class="home">
    <p id="zz">
      <transition name="bounce">
        <ap v-show="aa"></ap>
      </transition>
      <app></app>
      <!--<lunBo></lunBo>-->
      <lunbotu id="lunbotu"></lunbotu>
      。。。。    </p>
  </p></template>

Was oben im obigen Code angezeigt wird, ist der Inhalt der AP-Komponente, der bestimmt, ob er angezeigt werden soll Der externe Übergang verwendet Animationseffekte, um dieses Modul zu verlangsamen. Hier ist zu beachten, dass im Übergang das Namensattribut und nicht das Klassenattribut verwendet wird.

<script>  
import ap from &#39;./app.vue&#39;
  import app from &#39;./header-app.vue&#39;
  import lunBo from &#39;./lunbo.vue&#39;
    ......  export default{
    data () {      
        return {        
        scroll: &#39;&#39;,        
        aa: false
      }
    },    components: {
      ap,
      app,
    ......
    },
    mounted () {      
    window.addEventListener(&#39;scroll&#39;, this.menu)
    },    
    methods: {
      menu () {        
      this.scroll = document.body.scrollTop        
      if (this.scroll >= 115) {          
      this.aa = true
        } else {          
        this.aa = false
        }
      }
    }
  }
</script>

Der Code hier dient der Verarbeitung von Seiten-Scroll-Ereignissen

<style>
  .bounce-enter-active {    
  animation: bounce-in .5s;  }
  .bounce-leave-active {    
  animation: bounce-out .5s;  }
  @keyframes bounce-in {
    0% {      
    transform: translateY(-85px);    }
    /*50% {*/
      /*transform: translateY(-45px);*/
    /*}*/
    100% {      
    transform: translateY(0);    }
  }  
  @keyframes bounce-out {
    0% {      
    transform: translateY(0);    }
    /*50% {*/
      /*transform: translateY(-45px);*/
    /*}*/
    100% {      
    transform: translateY(-85px);    }
  }</style>

Der obige Code verarbeitet Animationsereignisse, hier verwenden wir benutzerdefinierte Ereignisse

Das obige ist der detaillierte Inhalt vonSo implementieren Sie das Scroll-Ereignis in Vue mit Animationseffekten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!