Vue实现滑动页面视图内容上移过渡动画效果

三线码工

已于 2022-09-06 09:48:24 修改

阅读量1.8k

点赞数 2

分类专栏： Vue JavaScript css 文章标签： javascript 动画 html

于 2022-09-06 09:19:36 首次发布

本文链接：https://blog.csdn.net/qq_35946021/article/details/126710577

版权

Vue 同时被 3 个专栏收录

23 篇文章 5 订阅

订阅专栏

JavaScript

12 篇文章 0 订阅

订阅专栏

css

2 篇文章 0 订阅

订阅专栏

在官网的开发中，PC上需要加一些动画让网页更加的炫酷

常见的就是将出现的视图内容向上加载过渡动画

将没有动画的“盒子”开发完后加上myanimation 类名就可以。logobox类名是自己的样式类名

<div :class="Animate1 ? 'logobox myanimation' : 'logobox'" ref="logobox">
    你的盒子的内容
</div>

myanimation可以设置为公共的class，这样可以只要加上该样式，都能够有上移过渡显示效果

.myanimation{
 
  animation: load 0.51s linear;
  transform:translateY(0px);
  opacity: 1;
}
@keyframes load {
	0% {
		opacity: 0;
    transform:translateY(80px)
	}
	100% {
		opacity: 1;
    transform:translateY(0px)
	}
}

utils.js文件

判断当前视口内容是否出现

export const isElementNotInViewport = function(el) {
    if (el) {
        let rect = el.getBoundingClientRect();
        return (
            rect.top >=
                (window.innerHeight || document.documentElement.clientHeight)
            // || rect.bottom <= 0
        );
    }
};

引用刚才的文件 import { isElementNotInViewport } from "@/utils/utils.js";

监听滚动事件，将div挂载的ref信息传参到isElementNotInViewport函数

data(){
    return {
        Animate1: false
    }
},
mounted() {
    // 监听滚动事件
    window.addEventListener("scroll", this.scrollToTop);
  },
  beforeRouteLeave(to, form, next) {
    // 离开路由移除滚动事件
    window.removeEventListener('scroll',this.scrollToTop);
    next();
  },
  methods: {
	// 滚动事件
    scrollToTop() {
	  this.Animate1=!isElementNotInViewport(this.$refs.logobox)
    },
}