需求:当我们想下拉页面,然后顶部弹出一些消息,如何实现,首先想到要用到页面的滚动事件,然后想到事件写到什么地方,不多说,看代码
<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>
上面代码是处理动画事件的,这里用的是自定义事件
Atas ialah kandungan terperinci 如何实现vue里面的scroll事件附带动画效果. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!