首頁 > web前端 > js教程 > 如何實現vue裡面的scroll事件附帶動畫效果

如何實現vue裡面的scroll事件附帶動畫效果

一个新手
發布: 2017-09-25 09:16:30
原創
3509 人瀏覽過

需求:當我們想下拉頁面,然後頂部彈出一些訊息,如何實現,首先想到要用到頁面的滾動事件,然後想到事件寫到什麼地方,不多說,看代碼

<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>
登入後複製

上面程式碼頂部要出現的是ap元件裡面的內容,這裡用的是v-show來判斷是否顯示,外部的transition是用動畫效果來實現這個模組緩慢下來。這裡要注意的是transition裡面用的是name屬性,而不是class屬性

<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>
登入後複製

這裡的程式碼是來處理頁面滾動事件的,下面來看如何處理動畫事件

<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>
登入後複製

上面程式碼是處理動畫事件的,這裡用的是自訂事件

以上是如何實現vue裡面的scroll事件附帶動畫效果的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板