【日常记录】【JS】js 实现元素平滑上升

文章目录

- 1、效果图
- 2、基本骨架
- 3、实现
- 4、完整代码

1、效果图

在这里插入图片描述

2、基本骨架

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    .container {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100%;
      padding-top: 300px;

    }

    .item {
      width: 70vw;
      height: 500px;
      margin-bottom: 20px;
      border-radius: 15px;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="item" style="background-color: #cee288;" data-index="1"></div>
    <div class="item" style="background-color: #775414;" data-index="2"></div>
    <div class="item" style="background-color: #681dd1;" data-index="3"></div>
    <div class="item" style="background-color: #38d1a6;" data-index="4"></div>
    <div class="item" style="background-color: #50e211;" data-index="5"></div>
    <div class="item" style="background-color: #53357b;" data-index="6"></div>
    <div class="item" style="background-color: #f196ee;" data-index="7"></div>
  </div>
</body>

</html>

3、实现

为了不污染原有的样式，就不用css属性了，直接用JS创建动画
创建完动画，不能先让它执行动画，执行与不执行是我们决定

    let itemsEl = document.querySelectorAll('.item');
    itemsEl.forEach(f => {
      // 为了不污染原有的 transition 等其他属性，可以自己创建一个动画
      console.log(isInViewport(f), f);
      if (!isInViewport(f)) return
      let translateYAnimate = f.animate([
        { transform: 'translateY(80px)' },
        { transform: 'translateY(0)' }
      ], {
        duration: 1000, // 动画时常
      })
      translateYAnimate.pause() // 先暂停所有动画，需要通过其他的方法来判断 这个DOM 是否进入可视区

    })

在这里插入图片描述

这样达到的效果是，界面一加载，都做动画了，并不是预想的结果，需要判断这个Item 是否进入可视区，如果进入可视区，才能做动画

      let observe = new IntersectionObserver((entries) => {
        entries.forEach(f => {
          console.log(f);
          if (f.isIntersecting) {
            translateYAnimate.play()
            observe.unobserve(f.target) // 观察一次就行，只需要做一次动画
          } else {
          }
        })
      })
      observe.observe(f)

这样确实可以实现了，但是浏览器会记住滚动条的位置，就会导致有问题，

刚进来的时候，看到的DOM 并不需要做动画
如果滚动到某一个位置后，刷新界面，再往上滚动，上面的DOM 也不需要做动画了

核心就是判断当前的DOM 距离视口顶部的距离是否超过了视口的高度，如果是，才需要做动画，否则不需要

4、完整代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    .container {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100%;
      padding-top: 300px;

    }

    .item {
      width: 70vw;
      height: 500px;
      margin-bottom: 20px;
      border-radius: 15px;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="item" style="background-color: #cee288;" data-index="1"></div>
    <div class="item" style="background-color: #775414;" data-index="2"></div>
    <div class="item" style="background-color: #681dd1;" data-index="3"></div>
    <div class="item" style="background-color: #38d1a6;" data-index="4"></div>
    <div class="item" style="background-color: #50e211;" data-index="5"></div>
    <div class="item" style="background-color: #53357b;" data-index="6"></div>
    <div class="item" style="background-color: #f196ee;" data-index="7"></div>
  </div>

  <script>
  // 判断这个元素，是否在可视区里面
    const isInViewport = (el) => {
      const rect = el.getBoundingClientRect();
      console.log(rect.top);
      return (
        rect.top >= 0 &&
        rect.top >= (window.innerHeight || document.documentElement.clientHeight)
      );
    };
    let itemsEl = document.querySelectorAll('.item');
    // let elAnimateMap = new Map();
    itemsEl.forEach(f => {
      // 为了不污染原有的 transition 等其他属性，可以自己创建一个动画
      if (!isInViewport(f)) return
      let translateYAnimate = f.animate([
        { transform: 'translateY(80px)' },
        { transform: 'translateY(0)' }
      ], {
        duration: 1000, // 动画时常

      })
      translateYAnimate.pause() // 先暂停所有动画，需要通过其他的方法来判断 这个DOM 是否进入可视区
      // elAnimateMap.set(f, translateYAnimate)




      let observe = new IntersectionObserver((entries) => {
        entries.forEach(f => {
          console.log(f);
          if (f.isIntersecting) {
            translateYAnimate.play()
            // elAnimateMap.get(f.target).play()
            observe.unobserve(f.target) // 观察一次就行
          } else {
            // translateYAnimate.pause()
          }
        })
      })
      observe.observe(f)
    })

  </script>
</body>

</html>