需求：当我们想下拉页面，然后顶部弹出一些消息，如何实现，首先想到要用到页面的滚动事件，然后想到事件写到什么地方，不多说，看代码
<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事件附带动画效果的详细内容。