部分代码
<div :class="showT?'showD':'fadeD'" class="top" >
<i class="iconfont icon-fanhui ic fff"></i>
<div class="topName">
<span>商品详情</span>
<span>商品评价</span>
</div>
</div>
js逻辑代码
export default {
// eslint-disable-next-line vue/multi-word-component-names
name: "Detail",
data() {
return {
showT: false,
};
},
methods: {
handleScroll(){
let scrollTop = document.documentElement.scrollTop
if (scrollTop>155) {
this.showT = true
}else {
this.showT = false
}
}
},
mounted(){
window.addEventListener('scroll',this.handleScroll)
},
beforeDestroy(){
window.removeEventListener('scroll',this.handleScroll)
},
};
css代码
核心逻辑:当滑动到指定距离时指定时渐进动画还是渐出动画
/* 顶部 */
.top {
position: fixed;
top: 0;
width: 750px;
display: flex;
align-items: center;
height: 84px;
background-color: #fff;
z-index: 100;
}
.showD {
animation: goin 1s ease 0s;
animation-fill-mode: both;
}
.fadeD {
animation: fade 1s ease 0s;
animation-fill-mode: both;
}
@keyframes goin {
from{
opacity: 0;
}
50% {
opacity: 0.5;
}
to{
opacity: 1;
}
}
@keyframes fade {
from{
opacity: 1;
}
50% {
opacity: 0.5;
}
to{
opacity: 0;
}
}
@-webkit-keyframes goin {
from{
opacity: 0;
}
50% {
opacity: 0.5;
}
to{
opacity: 1;
}
}
@-webkit-keyframes fade{
from{
opacity: 1;
}
50% {
opacity: 0.5;
}
to{
opacity: 0;
}
}