vue3 滚动条滑动到元素位置时,元素加载

水个文

效果

要实现的思路就是,使用IntersectionObserver 检测元素是否在视口中显示,然后在通过css来进行动画载入。

1.监控元素是否视口中显示

javascript 复制代码
      const observer = new IntersectionObserver((entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            acc.value = true
          }
        });
      });

      //监控元素
      observer.observe(slideInAnimation.value);

其中 if里就是当元素显示在视口中要执行的逻辑

然后在调用,在里面要传入要监控元素的元素对象,这里要在onmounted里调用,注意异步

javascript 复制代码
    onMounted(() => {
      //监控元素
      observer.observe(slideInAnimation.value);
    });

2.设置css

css 复制代码
.box {
  overflow: hidden;
  height: 4000px;
  /* 为了演示效果,设置一个高度 */
  display: flex;
  justify-content: center;
  align-items: center;
}

.slide-in-animation,
.onslide-in-animation {
  width: 400px;
  height: 200px;
}  //定义一个基础的数据,

.slide-in-animation {  //这个是要载入时,将css替换即可
  background-color: #f00;
  position: relative;
  animation: slide-in 4s forwards; //持续时间
}

@keyframes slide-in { //定义加载方式
  0% {
    visibility: hidden; //当百分0时元素不显示,从最右边加载,
    left: 100%;
  }

  100% { 
    left: 0%;  //百分百时加载到最左边
  }
}

大概是这个个逻辑,然后通过三目运算来控制class的值

html 复制代码
  <div class="box">
    <div :class="acc ? 'slide-in-animation' : 'onslide-in-animation'" ref="slideInAnimation">
      <img src="https://www.gm.com/assets/%E5%8D%81%E5%9B%9B%E6%9C%9F-CKW22HE9.png" alt=""
        style="width:400px;height:200px;">
    </div>

  </div>

acc最开始是false,不显示,而当元素在视口里时,将slide-in-animation类名加入,执行动画,然后实现滑动到元素位置时元素滑动载入,这里我只是做了一个示例,通过 @keyframes 可以实现更复杂的效果

源码

html 复制代码
<template>
  <div class="box">
    <div :class="acc ? 'slide-in-animation' : 'onslide-in-animation'" ref="slideInAnimation">
      <img src="https://www.gm.com/assets/%E5%8D%81%E5%9B%9B%E6%9C%9F-CKW22HE9.png" alt=""
        style="width:400px;height:200px;">
    </div>

  </div>
</template>

<script>
import { defineComponent, ref, onMounted } from 'vue';

export default defineComponent({
  setup() {
    const slideInAnimation = ref(null);
    const observer = new IntersectionObserver((entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            acc.value = true
          }
        });
      });
    onMounted(() => {
      //监控元素
      observer.observe(slideInAnimation.value);
    });
    const acc = ref(false)

    return {
      slideInAnimation, acc
    };
  }
});
</script>

<style scoped>
.box {
  overflow: hidden;
  height: 4000px;
  /* 为了演示效果,设置一个高度 */
  display: flex;
  justify-content: center;
  align-items: center;
}

.slide-in-animation,
.onslide-in-animation {
  width: 400px;
  height: 200px;
  
}

.slide-in-animation {
  background-color: #f00;
  position: relative;
  animation: slide-in 4s forwards;
}

@keyframes slide-in {
  0% {
    visibility: hidden;
    left: 100%;
  }

  100% {
    left: 0%;
  }
}
</style>
相关推荐
四喜花露水30 分钟前
Vue 自定义icon组件封装SVG图标
前端·javascript·vue.js
前端Hardy39 分钟前
HTML&CSS: 实现可爱的冰墩墩
前端·javascript·css·html·css3
web Rookie1 小时前
JS类型检测大全:从零基础到高级应用
开发语言·前端·javascript
Au_ust1 小时前
css:基础
前端·css
帅帅哥的兜兜1 小时前
css基础:底部固定,导航栏浮动在顶部
前端·css·css3
工业甲酰苯胺1 小时前
C# 单例模式的多种实现
javascript·单例模式·c#
yi碗汤园1 小时前
【一文了解】C#基础-集合
开发语言·前端·unity·c#
就是个名称1 小时前
购物车-多元素组合动画css
前端·css
编程一生2 小时前
回调数据丢了?
运维·服务器·前端
丶21362 小时前
【鉴权】深入了解 Cookie:Web 开发中的客户端存储小数据
前端·安全·web