CSS 滚动驱动动画 view-timeline-inset

  • view-timeline-inset
    • 语法
    • 例子🌰
        • [scroll-padding 为正](#scroll-padding 为正)
        • [正的 length](#正的 length)
        • [正的 percentage](#正的 percentage)
        • [scroll-padding 为负](#scroll-padding 为负)
        • [负的 length](#负的 length)
        • [负的 percentage](#负的 percentage)
    • 兼容性

view-timeline-inset

在使用 view() 时说过, 元素在滚动容器的可见性推动了 view progress timeline 的进展. 默认情况是元素即将出现在滚动容器时, timeline0%, 当 A 完全离开滚动元素时, timeline100%.

有时我们想调整过程, 比如让时间线早点开始或者早点结束, 换句话就是元素从什么位置开始是可见的, 从什么位置之后是不可见的, 这时就是 view-timeline-inset 大放异彩的时候了.

语法

可以是一个值或两个值, 值可以是 auto, 长度值或百分比值.

  • auto: (默认值)即偏移量是 0. 有的浏览器可能使用启发式的方法决定默认值. 实际上 auto 使用的是 scroll-padding 的值, 但是 scroll-padding 默认为 0, 所以 auto 就默认为 0.
  • 长度或百分比:
    • 正值: 如果值是正数, 元素可见和不可见的边界就会从默认位置向移动.
    • 负值: 如果值是负数, 元素可见和不可见的边界就会从默认位置向移动.
    • 📖 如果是这种值, 就会覆盖 scroll-padding

如果是两个值, 那么第一个值是元素可见边界的偏移, 第二个值是元素不可见边界的偏移. 如果是一个值, 那么开始和结束位置的偏移都是它.

例子🌰

先来看默认, 也就是 auto 的情况.

css 复制代码
.container {
  height: 200px;
  overflow: auto;
}
.box {
  animation: appear1 linear both;
  animation-timeline: view();
}
@keyframes appear1 {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
html 复制代码
<div class="container">
  Lorem...
  <div class="box"></div>
  Lorem...
</div>

scroll-padding 为正
css 复制代码
scroll-padding: 2em;

可以看到和前一个例子不同的是, 当元素出现 2em 后才开始动画, 到距离离开位置 2em 时动画就完成了

正的 length
css 复制代码
.box {
  animation: appear1 linear both;
  /* animation-timeline: view(); */
  animation-timeline: --why-is-this;
  view-timeline: --why-is-this;
}
.positive-inset-length {
  view-timeline-inset: var(--length);
}

📖 在开始之前, 我发现 view()view-timeline-inset 好像不对付, 两个属性在一块后者死活不生效, 但是我查了一圈也没查出来个所以然.

我很好奇, 如果高度设置的足够大, 大到开始位置是原来结束的位置, 结束的位置反过来到开始的位置会怎么样?

结果就是动画反过来了, 之前的情况是消失到出现, 现在是出现到消失.

正的 percentage

percentage 显然是根据滚动轴来算的, 例子中的情况是 y 轴滚动, 那么就是按高度来算, 200px * 20% = 40px

scroll-padding 为负

🙅‍♂️🙅‍♂️ 负值没有效果, 相当于 0.

负的 length
css 复制代码
view-timeline-inset: -3em;

发现, 当元素开始出现时它已经有了宽度, 当它要消失时, 动画还没有结束. 我截图了它最大宽度作为对比.

负的 percentage
css 复制代码
view-timeline-inset: -40%;

兼容性

大家假期快乐~谢谢你看到这里😊

相关推荐
庸俗今天不摸鱼31 分钟前
【万字总结】前端全方位性能优化指南(十)——自适应优化系统、遗传算法调参、Service Worker智能降级方案
前端·性能优化·webassembly
黄毛火烧雪下38 分钟前
React Context API 用于在组件树中共享全局状态
前端·javascript·react.js
Apifox1 小时前
如何在 Apifox 中通过 CLI 运行包含云端数据库连接配置的测试场景
前端·后端·程序员
一张假钞1 小时前
Firefox默认在新标签页打开收藏栏链接
前端·firefox
高达可以过山车不行1 小时前
Firefox账号同步书签不一致(火狐浏览器书签同步不一致)
前端·firefox
m0_593758101 小时前
firefox 136.0.4版本离线安装MarkDown插件
前端·firefox
掘金一周1 小时前
金石焕新程 >> 瓜分万元现金大奖征文活动即将回归 | 掘金一周 4.3
前端·人工智能·后端
三翼鸟数字化技术团队1 小时前
Vue自定义指令最佳实践教程
前端·vue.js
Jasmin Tin Wei2 小时前
蓝桥杯 web 学海无涯(axios、ecahrts)版本二
前端·蓝桥杯
圈圈编码2 小时前
Spring Task 定时任务
java·前端·spring