我们介绍过的两种时间线 scroll progress timeline 和 view progress timeline, 使用这两种时间线(通过 view(), scroll(), 或者具名时间线)的元素都需要向上查询 DOM 树找到滚动容器, 这就是时间线的默认范围。
<div class="p"> <div class="a"></div><div class="b"> Lorem... </div> </div> // 堆代码 duidaima.com .p { height: 200px; timeline-scope: --i-am-here; } .p > div { width: 50%; /** 为了避免渲染换行符导致宽度不够 */ height: 100%; display: inline-block; } .a { animation: grow both; animation-timeline: --i-am-here; } .b { overflow: auto; scroll-timeline-name: --i-am-here; } @keyframes grow { from { transform: scale(0); } to { transform: scale(1); } }可以看到效果, 驱动左侧动画的不再是其父元素, 而是其兄弟元素, 从而大大提高了设计使用动画的灵活性。
<div class="p"> <div class="a"></div><div class="b"> Lorem ... <div class="box"></div> Lorem ... </div> </div> /* 大部分都和前面的一样, 不过我们修改了 .b 并增加了 .box */ .b { overflow: auto; /* scroll-timeline-name: --i-am-here; */ } .b .box { view-timeline-name: --i-am-here; }从下图很容易就看出, 这次驱动左侧动画的是右侧的 .box 元素, 当 .box 开始出现时, 左侧动画进行; 当 .box 完全离开时, 动画结束. 📖注意动画结束时, 右侧的还没有滚动到最后, 说明这次的动画不是由 scroll progress timeline 驱动而是由 view progress timeline 驱动. 这当然显而易见, 因为代码中 scroll progress timeline 的部分被注释了.
.b .box { view-timeline-name: --i-am-here; animation: grow both; animation-timeline: --i-am-here; }
兼容性