使用 IntersectionObserver（原生 JS）实现滚动时的淡入动画
示例和目标
蓝图
由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！
当我们浏览一个动画效果炫酷的网站时，我们往往会在网站上停留很长时间。
可以说，这些动画功能有助于吸引访客访问您的网站。
今天，我将和大家分享如何使用原生 JavaScript实现滚动时的淡入动画。
使用 IntersectionObserver 来监视要添加动画的元素是否在浏览器中，您可以创建一个淡入动画，当元素进入浏览器时触发该动画。
示例和目标
这里有两个示例。
第一个示例为包含五个项目的容器添加了滚动淡入动画。
第二个示例为每五个项目添加一个淡入动画。
您可以反复滚动并检查动画效果。
蓝图
首先，用 HTML 创建一个你想应用淡入动画的元素，并添加 `.appear` 类。（类名无关紧要，随意命名即可。）
带有 `.appear` 类的元素将成为淡入动画的目标。
其次，用 CSS 编写淡入动画。当将 '.inview' 类添加到带有 '.appear' 的元素时，将 opacity 设置为 1，并将transform: translateY(40px) 设置为 none。
第三，使用 JavaScript 的 IntersectionObserver 控制 '.inview' 类。
本文中，我们将使用统一的类名进行解释。
- '.appear' 类 → 它会将淡入动画添加到要应用淡入效果的元素的类中。
- '.inview' 类 → 当具有 'appear' 类的元素进入浏览器时，将添加该类。
我们来尝试制作一个滚动时的淡入动画！
使用 IntersectionObserver 监控单个元素和控制类
1.根据上述蓝图准备具有“appear”类的元素。
<div class="container appear">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
这次，我在容器 div 上应用了 'appear' 类。
2.准备CSS动画。
.appear {
transition: all 0.8s;
opacity: 0;
transform: translateY(40px);
}
.appear.inview {
opacity: 1;
transform: none;
transition-delay: 0.3s;
}
如果一个元素具有“appear”类，则会应用“transition”、“opacity”和“transform”效果。
在这种情况下，我编写了 CSS，使得一旦添加了“inview”类，translateY 值就会消失。这样一来，带有“appear”类的元素就会从其正常位置向下移动 40px。
然后，通过改变“opacity”（透明度），该元素就可以在浏览器中显示出来。
3. 使用 IntersectionObserver 监视元素和控件类
您可以使用 IntersectionObserver 来确定被监视的元素是否在浏览器中，并添加或删除“inview”类。
const appear = document.querySelector('.appear');
const cb = function(entries){
entries.forEach(entry => {
if(entry.isIntersecting){
entry.target.classList.add('inview');
}else{
entry.target.classList.remove('inview');
}
});
}
const io = new IntersectionObserver(cb);
io.observe(appear);
我将解释我是如何使用“IntersectionObserver”的。1
.获取要监视的元素。
const appear = document.querySelector('.appear');
在这种情况下，它是“容器”类的 div。2.
编写回调函数。
const cb = function(entries){
entries.forEach(entry => {
if(entry.isIntersecting){
entry.target.classList.add('inview');
}else{
entry.target.classList.remove('inview');
}
});
}
IntersectionObserver 会传递一个回调函数作为参数。
在本代码中，回调函数名为 'cb'。
要使用 'forEach' 循环找出哪些元素发生了相交。'entry.isIntersecting
' 可用于判断元素是否在屏幕内。if
-else 语句可用于编写代码来添加或移除类。
如果元素发生了相交，则将 'inview' 类添加到 'appear' 类中。
3.调用构造函数创建一个交叉观察器并传递一个回调函数。
const io = new IntersectionObserver(cb);
4.指定要监控的目标元素。
io.observe(appear);
这段代码正在监视带有“appear”类的元素。
使用 IntersectionObserver 监控多个元素（具有相同的类名）并控制类
1.根据上述蓝图准备具有“appear2”类的元素。
<div class="container">
<div class="item appear2">1</div>
<div class="item appear2">2</div>
<div class="item appear2">3</div>
<div class="item appear2">4</div>
<div class="item appear2">5</div>
</div>
在第二种模式中，我们将实现一个动画，其中多个元素在不同的时间淡入淡出。
我给每个项目添加了“appear2”类。
2.使用 Sass 准备 CSS 动画。
.appear2 {
transition: all 0.8s;
opacity: 0;
transform: translateY(20px);
&.inview2 {
opacity: 1;
transform: none;
@for $i from 1 through 5 {
&:nth-child(#{$i}) {
transition-delay: $i * 0.1s;
}
}
}
}
'.appear2' 类与 '.appear' 类的样式相同。
但是，'.inview2' 类包含一个 for 循环部分，用于实现过渡延迟。
在 Sass 中，我们可以很方便地处理循环。
我将为每个元素添加过渡延迟。
我使用循环语句为每个元素添加时间延迟，使其逐个显示。
如果你想用 CSS 来写，它会像这样很长。
.appear2.inview2 {
opacity: 1;
transform: none;
}
.appear2.inview2:nth-child(1) {
transition-delay: 0.1s;
}
.appear2.inview2:nth-child(2) {
transition-delay: 0.2s;
}
.appear2.inview2:nth-child(3) {
transition-delay: 0.3s;
}
.appear2.inview2:nth-child(4) {
transition-delay: 0.4s;
}
.appear2.inview2:nth-child(5) {
transition-delay: 0.5s;
}
如你所见，Sass 功能强大且实用，我个人也很喜欢 Sass。
3. 使用 IntersectionObserver 监控多个元素和控件类
最后，我们将使用 IntersectionObserver 来控制类。
在本示例中，我们需要监视多个元素，因此我们将使用循环语句来实现它。
const items = document.querySelectorAll('.appear2');
const active = function(entries){
entries.forEach(entry => {
if(entry.isIntersecting){
entry.target.classList.add('inview2');
}else{
entry.target.classList.remove('inview2');
}
});
}
const io2 = new IntersectionObserver(active);
for(let i=0; i < items.length; i++){
io2.observe(items[i]);
}
这次我们需要获取多个元素，所以我将使用
“querySelector*All*”。
const items = document.querySelectorAll('.appear2');
这部分内容与上文相同。
const active = function(entries){
entries.forEach(entry => {
if(entry.isIntersecting){
entry.target.classList.add('inview2');
}else{
entry.target.classList.remove('inview2');
}
});
}
const io2 = new IntersectionObserver(active);
最后一部分与上一部分不同。
由于有多个元素具有“appear2”类，我们将使用循环语句编写代码来监视所有具有“appear2”类的元素。
for(let i=0; i < items.length; i++){
io2.observe(items[i]);
}
`.observe()` 的用法是这样的：`.observe(要监控的元素)`。
如果你想监控多个具有不同类的元素，可以这样写。
const item1 = document.querySelector('.item1');
const child = document.querySelector('.child');
const element = document.querySelector('.element');
///...(omitted)...IntersectionObserver
io2.observe(item1);
io2.observe(child);
io2.observe(element);
我们终于可以使用 IntersectionObserver 实现滚动时的淡入动画了！
这是我的第一篇科技类文章，希望大家能轻松理解。
谢谢！