首页 > web前端 > js教程 > 正文

如何实现vue里面的scroll事件附带动画效果

一个新手
发布: 2017-09-25 09:16:30
原创
3489 人浏览过

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

<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
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!