元素不会在用户滚动时淡入答案

【问题标题】：Elements not fading in on user scroll元素不会在用户滚动时淡入
【发布时间】：2020-08-04 21:23:29
【问题描述】：

试图在用户向下滚动页面时使图像元素淡出。目前，图像根本没有显示。 JS 有问题，但不知道如何排除故障。下面是 HTML、CSS 和 JS。一组新的眼睛可能会最有帮助。谢谢！

const faders = document.querySelectorAll('.fade-in');
const appearOptions = {
threshold: 1,
rootMargin: "0px 0px -100px 0px",
};

const appearOnScroll = new IntersectionObserver(function(entries,
appearOnScroll) {
entries.forEach(entry => {
    if (!entry.isIntersecting) {
        return;
    } else {
        entry.target.classList.add('appear');
        appearOnScroll.unobserve(entry.target);
    }
    })
    }, 
    appearOptions);

    faders.forEach(fader => {
    appearOnScroll.observe(fader);
    })

还有我的 HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="js/observer.js"></script>
<title>Document</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<main>
    <h3>Design Studio Project</h3>
    <div class="videowrapper">
    <video controls="controls" width="1920" height="1080" 
   name="studioProject" type="mov" src="images/web_StudioProject_rd03.mp4"></video>
    </div>
    <div class="remainingslides">
    <img class="fade-in" src="images/remaining_keyframes-01.png">
    <img class="fade-in" src="images/remaining_keyframes-02.png">
    <img class="fade-in" src="images/remaining_keyframes-03.png">
    <img class="fade-in" src="images/remaining_keyframes-04.png">
    <img class="fade-in" src="images/remaining_keyframes-05.png">
    <img class="fade-in" src="images/remaining_keyframes-06.png">
    <img class="fade-in" src="images/remaining_keyframes-07.png">
    <img class="fade-in" src="images/remaining_keyframes-08.png">
    <img class="fade-in" src="images/remaining_keyframes-09.png">
</div>
</main>
<script src="js/observer.js"></script>
</body>
</html>

和 CSS

.fade-in {
opacity: 0;
transition: opacity 250ms ease-in;
}
.fade-in.appear {
opacity: 1;
}

【问题讨论】：

stackoverflow.com/help/minimal-reproducible-example

标签： javascript html css fadein

【解决方案1】：

您的代码存在一些问题：

在您的 HTML 中，您两次引用了您的 js 文件。

https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

我还清理了您如何调用 IntersectionObserver 并传递回调/选项。

弹出的错误显然是一个已知的“非”问题：

ResizeObserver - loop limit exceeded

const faders = document.querySelectorAll('.fade-in');
var appearOptions = {
  threshold: 1,
  rootMargin: "0px 0px -100px 0px",
};

const appearOnScroll = new IntersectionObserver((entries,
    appearOptions) => {
    
    entries.forEach(entry => {
      if (!entry.isIntersecting) {
        return;
      } else {
        entry.target.classList.add('appear');
        appearOnScroll.unobserve(entry.target);
      }
    })
  });

faders.forEach(fader => {
  appearOnScroll.observe(fader);
})

.fade-in {
    opacity: 0;
    transition: opacity 250ms ease-in;
    }
    .fade-in.appear {
    opacity: 1;
    }

<main>
        <h3>Design Studio Project</h3>
        <h2>The Most Important Revolutions</h2>
        <p>Lauren Miggins</p>
        <p>Summer 2020</p>
        <div class="videowrapper">
        <video controls="controls" width="1920" height="1080" 
       name="studioProject" type="mov" src="images/web_StudioProject_rd03.mp4"></video>
        </div>
        <div class="remainingslides">
        <img class="fade-in" src="https://via.placeholder.com/800">
        <img class="fade-in" src="https://via.placeholder.com/800">
        <img class="fade-in" src="https://via.placeholder.com/800">
        <img class="fade-in" src="https://via.placeholder.com/800">
        <img class="fade-in" src="https://via.placeholder.com/800">
        <img class="fade-in" src="https://via.placeholder.com/800">
        <img class="fade-in" src="https://via.placeholder.com/800">
        <img class="fade-in" src="https://via.placeholder.com/800">
        <img class="fade-in" src="https://via.placeholder.com/800">
    </div>
    </main>

【讨论】：

【解决方案2】：

您已在页面上添加了 2 次 observer.js。但是你的其他东西对我有用。

我没有你的图片和视频，所以我删除了这个例子的视频，把图片变成了一个红色的方块。

奇怪，但它在片段编辑器中工作，但不是在查看模式下！

不管怎样，这里的 jsfiddle 也是一样的：click。

const faders = document.querySelectorAll('.fade-in');
const appearOptions = {
  threshold: 1,
  rootMargin: "0px 0px -100px 0px",
};

const appearOnScroll = new IntersectionObserver(function(entries,
    appearOnScroll) {
    entries.forEach(entry => {
      if (!entry.isIntersecting) {
        return;
      } else {
        entry.target.classList.add('appear');
        appearOnScroll.unobserve(entry.target);
      }
    })
  },
  appearOptions);

faders.forEach(fader => {
  appearOnScroll.observe(fader);
})

.fade-in {
  opacity: 0;
  transition: opacity 250ms ease-in;
}

.fade-in.appear {
  opacity: 1;
}

/* Helpers: */

main {
  width: 800px;
}

img {
  display: inline-block;
  border: 1px solid red;
  background: red;
  min-width: 200px;
  min-height: 200px;
}

<main>
    <h3>Design Studio Project</h3>
    <h2>The Most Important Revolutions</h2>
    <p>Lauren Miggins</p>
    <p>Summer 2020</p>
    <div class="videowrapper">
    <!--video controls="controls" width="1920" height="1080" 
   name="studioProject" type="mov" src="images/web_StudioProject_rd03.mp4"></video-->
    </div>
    <div class="remainingslides">
    <img class="fade-in" src="images/remaining_keyframes-01.png">
    <img class="fade-in" src="images/remaining_keyframes-02.png">
    <img class="fade-in" src="images/remaining_keyframes-03.png">
    <img class="fade-in" src="images/remaining_keyframes-04.png">
    <img class="fade-in" src="images/remaining_keyframes-05.png">
    <img class="fade-in" src="images/remaining_keyframes-06.png">
    <img class="fade-in" src="images/remaining_keyframes-07.png">
    <img class="fade-in" src="images/remaining_keyframes-08.png">
    <img class="fade-in" src="images/remaining_keyframes-09.png">
</div>
</main>

【讨论】：