timeline-scope
看到 scope 就知道这个属性是和
范围
有关, 没错,timeline-scope
就是用来修改一个具名时间线(named animation timeline
)的范围.
我们介绍过的两种时间线 scroll progress timeline
和 view progress timeline
, 使用这两种时间线(通过 view()
, scroll()
, 或者具名时间线)的元素都需要向上查询 DOM
树找到滚动容器, 这就是时间线的默认范围.
可是有时驱动元素 A
动画可能是 A
的兄弟元素 B
的滚动, 我们应该怎么办呢?
- 在
A
上使用animation-timeline
表示需要一个具名时间线来驱动动画, 比如--whatever-this
- 在
B
元素上使用scroll-timeline-name: --whatever-this
表示由B
元素来提供时间线. - 最后, 在
A
和B
的共同祖先P
上使用timeline-scope: --whatever-this
表示时间线范围提升到P
和P
的任何后代元素上.
来看例子
📖 我特意没有在两个 div
之间换行, 为了避免换行的出现
<div class="p">
<div class="a"></div