CSS 滚动驱动动画 timeline-scope

timeline-scope

看到 scope 就知道这个属性是和范围有关, 没错, timeline-scope 就是用来修改一个具名时间线(named animation timeline)的范围.

我们介绍过的两种时间线 scroll progress timelineview progress timeline, 使用这两种时间线(通过 view(), scroll(), 或者具名时间线)的元素都需要向上查询 DOM 树找到滚动容器, 这就是时间线的默认范围.

可是有时驱动元素 A 动画可能是 A 的兄弟元素 B 的滚动, 我们应该怎么办呢?

  • A 上使用 animation-timeline 表示需要一个具名时间线来驱动动画, 比如 --whatever-this
  • B 元素上使用 scroll-timeline-name: --whatever-this 表示由 B 元素来提供时间线.
  • 最后, 在 AB 的共同祖先 P 上使用 timeline-scope: --whatever-this 表示时间线范围提升到 PP 的任何后代元素上.

来看例子

📖 我特意没有在两个 div 之间换行, 为了避免换行的出现

<div class="p">
  <div class="a"></div
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值