So implementieren Sie das Scroll-Ereignis in Vue mit Animationseffekten-js-Tutorial-php.cn

So implementieren Sie das Scroll-Ereignis in Vue mit Animationseffekten

一个新手

Freigeben： 2017-09-25 09:16:30

Original

3538 Leute haben es durchsucht

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!