（第二阶段）IntersectionObserver页面优化实现动画class的添加移除

最新推荐文章于 2024-04-09 16:26:23 发布

WangHaiLongWang

最新推荐文章于 2024-04-09 16:26:23 发布

阅读量274

点赞数

文章标签： js vue javascript css3 html5

本文链接：https://blog.csdn.net/WangHaiLongWang/article/details/107004143

版权

进一步使用IntersectionObserver对动画进行优化

01.回顾上一阶段记录动画的具体值然后判断进行赋值

https://blog.csdn.net/WangHaiLongWang/article/details/106556538

02.现在阶段目标实现: 记录动画的class ，进行动态移除和添加class

废话不多说上代码

	// 定义函数
    functionIntersectionObserver(el) {
      //获取包含动画的class名称
      let arrList = $(el);
      //定义将要存储的class动画名称
      let className = "";
      //调用IntersectionObserver创建实例
      var intersectionObserver = new IntersectionObserver(function(entries) {
        // 获取到想要取消动画的元素
        let elementS = entries[0].target;
        // 判断className是否为第一次声明和赋值  要求只赋值一次
        if (!className) {
          let classLIst = elementS.getAttribute("class").split(" ");
          className = classLIst.filter((item, index) => {
          	//匹配到包含move_的class  动画所在的class 将要动态移除和添加这个类名
            if (item.match("move_")) {
              return item;
            }
          });
        }
        // 当元素所处在视图中
        if (entries[0].isIntersecting) {
          elementS.classList.add(...className);
        }
        // 当元素所出与视图外面
        else {
          new Promise((resolve, reject) => {
            resolve("成功");
          }).then(res => {
            elementS.classList.remove(...className);
          });
        }
      });
      // 遍历所有元素，进行监听
      arrList.each((index, item) => {
        intersectionObserver.observe(item);
      });
    }