需求:當我們想下拉頁面,然後頂部彈出一些訊息,如何實現,首先想到要用到頁面的滾動事件,然後想到事件寫到什麼地方,不多說,看代碼
<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 './app.vue' import app from './header-app.vue' import lunBo from './lunbo.vue' ...... export default{ data () { return { scroll: '', aa: false } }, components: { ap, app, ...... }, mounted () { window.addEventListener('scroll', 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中文網其他相關文章!