元素进入可视区域执行 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        #show {
            width: 500px;
            height: 350px;
            background-color: aqua;
            margin: 1000px auto 0 auto;
        }

        .show {
            animation: loading 2s linear;
        }

        @keyframes loading {
            from {
                opacity: 0;
                transform: translate(-100%, 0);
            }
            to {
                opacity: 1;
                transform: translate(0, 0);
            }
        }
    </style>
</head>
<body>
<p id="show"></p>
<script>
  // classList.add( newClassName )；
  // 添加新的类名，如已经存在，取消添加
  // classList.contains( oldClassName );
  // 确定元素中是否包含指定的类名，返回值为true 、false；
  // classList.remove( oldClassName )；
  // 移除已经存在的类名;
  // classList.toggle( className )；
  // 如果classList中存在给定的值，删除它，否则，添加它；
  // classList.replace( oldClassName，newClassName )；
  // 类名替换

  // window.onscroll = function () {
  //   let show = document.getElementById('show');
  //   // 获取浏览器窗口可视化高度
  //   let clientH = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
  //   // 获取show元素顶部到浏览器窗口顶部的距离
  //   let showTop = show.getBoundingClientRect().top;
  //   // 如果距离小于可视化窗口高度，就给show元素添加动画效果
  //   if (showTop <= clientH) {
  //     show.classList.add('show');
  //   } else {
  //     show.classList.remove('show');
  //   }
  // };

  window.addEventListener('scroll', () => {
    let show = document.getElementById('show');
    // 获取浏览器窗口可视化高度
    let clientH = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
    // 获取show元素顶部到浏览器窗口顶部的距离
    let showTop = show.getBoundingClientRect().top;
    // 如果距离小于可视化窗口高度，就给show元素添加动画效果
    if (showTop <= clientH) {
      show.classList.add('show');
    } else {
      show.classList.remove('show');
    }
  })
</script>
</body>
</html>

 

posted @ 2022-02-12 14:43  ronle  阅读(89)  评论(0)    收藏  举报