vue里面的scroll事件，以及如何处理事件问题，附带动画效果如何实现

需求：当我们想下拉页面，然后顶部弹出一些消息，如何实现，首先想到要用到页面的滚动事件，然后想到事件写到什么地方，不多说，看代码

<template>  <div class="home">    <div id="zz">      <transition name="bounce">        <ap v-show="aa"></ap>      </transition>      <app></app>      <!--<lunBo></lunBo>-->      <lunbotu id="lunbotu"></lunbotu>      。。。。    </div>  </div></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>

上面代码是处理动画事件的，这里用的是自定义事件