长页面滚动动画(优化)

最新推荐文章于 2024-06-30 15:38:14 发布

大东哦哦

最新推荐文章于 2024-06-30 15:38:14 发布

阅读量309

点赞数

分类专栏： html js 文章标签： css3 html5

本文链接：https://blog.csdn.net/qq_36454089/article/details/107716504

版权

本文针对之前实现的长页面滚屏动画存在的问题进行了优化，包括减少代码冗余、简化元素选择和处理多个类名的动画元素。通过使用Less封装动画函数，以及利用父元素遍历子元素来实现，使得动画效果更加高效且易于维护。文章提供了优化后的完整代码示例。

摘要由CSDN通过智能技术生成

之前写的长页面滚屏动画回过头看发现有很多局限性

比如 :

1 . 每次动画后都要加上opacity:1,元素过多时候代码冗余

2 . 如果动画元素过多 , js调用aniCom()方法时候 , 传入值过多 , 容易出错

3 . 如果动画元素是类名有多个 , 调用aniCom() 时候不起作用

进行优化

1:使用less封装动画函数

// 封装动画 简化每次动画操作
.fill-mode {
  opacity: 0;
  animation-fill-mode: forwards;
}

// 动画名 , 动画时长 , 等待时间 默认0s @await: 0s;
.ani(@name, @second, @await: (0s)) {
  animation: @name @second @await;
  // 内部调用 动画初始值透明度 和 结束状态
  .fill-mode();
}

.infinite {
  animation-iteration-count: infinite;
}

2:用父元素遍历直接子元素 , 给所有子元素添加动画类名now , 调用时只需传入父元素即可

判断得到的类名是否为多个类名 , 对多个类名的动画元素进行处理

  // 核心代码,封装成函数
  let tool = {
    aniCom(ele) {
      var ele = this.splitStr(ele)
      $(window).scroll(function () {
        var winTop = $(window).scrollTop()
        $(ele).each(function () {
          if ($(this).offset().top < winTop + $(window).height() * 0.85) {
            $(this).addClass('now')
          } else if ($(this).offset().top - $(window).height() >= winTop) {
            $(this).removeClass('now')
          }
        })
      })
    },
    splitStr: function (ele) {
      var arr = []
      $(ele).children().each(function () {
        // 正则判断 类名中间是否有空格
        // 有空格就去除空格 选择第一个类名 添加到arr空数组中
        if (/\s/.test($(this).attr('class'))) arr.push('.' + $(this).attr('class').split(" ")[0]);
        arr.push('.' + $(this).attr('class'))
      })
      return arr.join();
    }
  }

3 : 简化了层次动画的代码量 (相同的多个元素,进行动画)