【CSS】2327- CSS view()：JavaScript 滚动动画的终结

less 复制代码

译者：@飘飘

作者：@Digvijay Mahapatra

原文：

https://javascript.plainenglish.io/finally-a-better-way-to-handle-scroll-animations-ac3f4fc1bc1e

前言

CSS view () 方法可能会标志着 JavaScript 在制作滚动动画方面的衰落。今日文章由 @Digvijay Mahapatra 分享，前端早读课@飘飘翻译。

如何用 5 行 CSS 代码取代 50 多行繁琐的 JavaScript，彻底改变网页动画

每次和 UI/UX 设计师开完会，只要他们让我实现滚动动画，我内心都忍不住想大声尖叫。为什么？因为我真的讨厌写滚动动画！虽然这种效果看起来很棒，实现起来也 "相对简单"，但也有不少棘手的问题需要解决，尤其是当页面上有大量动画元素时。然而，当客户要求那些 "滚动时淡入" 的炫酷效果时，你又能怎么办呢？只能撸起袖子写些 JavaScript 代码，哪怕这会让你内心隐隐作痛。

JavaScript 时代（又名 "黑暗时代"）

过去，我经常写这样的代码（如果你现在还在这么做，我感同身受）：

ini 复制代码

 window.addEventListener('scroll',()=>{
   const elements = document.querySelectorAll('.fade-in');

   elements.forEach(element=>{
     const elementTop = element.getBoundingClientRect().top;
     const windowHeight = window.innerHeight;

     if(elementTop < windowHeight *0.8){
       element.style.opacity = '1';
       element.style.transform ='translateY(0)';
     }
   });
});

我当时的做法是修改 CSS 属性，或者给需要动画的元素添加类名，让其施展了些魔法。但更麻烦的是，我还得实现动画的反向效果，整个过程既繁琐又丑陋，而且我超级讨厌这样做。可怜的浏览器在每次滚动事件时都要处理这些计算，有时我都能听到它的哀鸣。在手机上，电池指示器会突然电量骤降。

随着对 JavaScript 了解得越来越深入，我开始使用防抖（debouncing）技术来减少计算次数。当然，这确实有所改进，但这难道就是最好的办法了吗？

发现 Intersection Observer（希望的曙光）

后来，我找到了 Intersection Observer API。终于，出现了更好的方法！相比不断监听滚动位置，我可以直接告诉浏览器："嘿，当这个元素出现在视口时提醒我"------ 这样就省去了很多不必要的计算：

ini 复制代码

const observer =newIntersectionObserver((entries)=>{
   entries.forEach(entry=>{
     if(entry.isIntersecting){
       entry.target.classList.add('visible');
       observer.unobserve(entry.target);// Fire and forget!
     }
   });
},{threshold:0.2});

 document.querySelectorAll('.animate-on-scroll')
   .forEach(el=> observer.observe(el));

结合一些 CSS：

css 复制代码

.animate-on-scroll{
   opacity: 0;
   transform:translateY(20px);
   transition: all 0.6s ease-out;
}

.animate-on-scroll.visible{
   opacity: 1;
   transform:translateY(0);
}

这确实比以前的做法好太多了！但还是有点不对劲 ------ 动画要么开，要么关，缺少基于滚动位置的流畅控制。每当客户要求那种超级丝滑的视差（parallax）效果或渐进式展示（progressive reveal），我又得回去写复杂的 JavaScript 代码，或者使用在网上找到的 CSS 技巧。

一切改变了：CSS `view()` 函数

然后，CSS 之神赐予了我 view()。我的天，简直神迹！来看这段代码：

css 复制代码

@keyframes fadeIn{
   from{
     opacity: 0;
     transform:translateY(20px);
   }
   to{
     opacity: 1;
     transform:translateY(0);
   }
}

.fade-in{
   animation: fadeIn linear;
   animation-timeline:view();/* 关键点 */
   animation-range: entry 10% cover 30%;/* 精彩之处 */
}

就是这样！无需 JavaScript。无需事件监听器。没有性能噩梦。只有顺滑流畅的动画，响应滚动操作。

想玩点更花哨的？如果你想让元素在滚动进入时淡入，在滚动离开时淡出？完全没问题！

css 复制代码

@keyframes fadeInOut{
   0%{
     opacity: 0;
     scale: 0.5;
     transform:translateX(100%);
   }
   50%{
     opacity: 1;
     scale: 1;
     transform:translateX(0);
   }
   100%{
     opacity: 0;
     scale: 0.5;
     transform:translateX(100%);
   }
}

.fade-in-out{
   animation: fadeInOut linear;
   animation-timeline:view();
   animation-range: entry exit;
}

当我第一次试验这个功能时，我真的笑出了声。以前花费无数时间优化滚动监听器、计算百分比...... 现在只要几行 CSS 就搞定？简直颠覆认知！

stackblitz.com/edit/stackb...

最棒的部分？

你知道最令人惊喜的是什么吗？性能。以前那些 JavaScript 滚动监听器，总是让我的 MacBook 风扇狂转，仿佛要起飞。而 view() 呢？就像黄油般顺滑，即使在移动端也依然流畅。浏览器会负责所有复杂的计算，并且在合成线程（compositor thread）上运行（简单来说，就是 "超级快"）。

更棒的是，它就是好用 ------

不再需要调试为什么动画触发得太早或太晚。
不再需要为滚动位置的计算误差几像素而抓狂。
即使页面上有大量动画元素，也不会再有滚动卡顿（scroll-jank）。
它就这么简单地工作了。

深入理解 CSS `view()` 函数

CSS view() 函数的引入标志着我们在处理滚动驱动动画方面的一个重大转变。让我们拆解这个强大的新特性，看看它是如何彻底改变网页动画的。

`animation-timeline: view()`

从本质上讲， view() 根据元素在视口中的可见性创建了一个进度时间轴。可以将其视为一个虚拟的时间轴，当元素进入视口时向前移动，当元素离开视口时向后移动。

css 复制代码

.element{
   animation-timeline:view();
}

你还可以自定义视口检测的方式，比如添加边距：

css 复制代码

/* 为视口检测添加边距 */
animation-timeline:view(block 10px);        /* 竖直方向 10px 边距 */
animation-timeline:view(inline 50%);        /* 水平方向 50% 边距 */
animation-timeline:view(10px 20px 30px 40px);/* 四个方向的边距 */

`animation-range` 详解

animation-range 属性定义了动画相对于元素在视口中的位置开始和结束的时间。这就像为你的动画设置检查点。

可用的范围值：

entry：当元素开始进入视口时
exit：当元素开始离开视口时
contain：当元素完全位于视口内时
cover：当元素完全覆盖整个视口时

示例：

基本范围设定（动画从进入视口开始，到完全覆盖视口结束）：

css 复制代码

.fade-in{
   animation-range: entry 0% cover 100%;
}

更复杂的范围设定（元素进入视口时播放第一部分动画，元素即将离开视口时播放第二部分动画）：

c 复制代码

.fade-in-out{
   animation-range: entry 0% entry 50%,  /* 进入视口的前半段 */
                   exit 50% exit 100%;  /* 离开视口的后半段 */
}

这些检查点可以与 @keyframes 结合，实现以前需要大量 JavaScript 才能完成的复杂动画。

⚠️ 注意：浏览器支持情况

虽然 view() 非常强大，但目前并不是所有浏览器都支持它。以下是各大浏览器的支持情况：

【CSS】2327- CSS view()：JavaScript 滚动动画的终结

JavaScript 时代（又名 "黑暗时代"）

发现 Intersection Observer（希望的曙光）

一切改变了：CSS view() 函数

最棒的部分？

深入理解 CSS view() 函数

animation-timeline: view()

animation-range 详解

⚠️ 注意：浏览器支持情况

一切改变了：CSS `view()` 函数

深入理解 CSS `view()` 函数

`animation-timeline: view()`

`animation-range` 详解