静安制作企业网站,wordpress 开发视频,智信建设职业培训学校网站,动态页面设计view-timeline-inset 语法例子#x1f330; 正 scroll-padding 为正正的 length正的 percentage 负 scroll-padding 为负负的 length负的 percentage 兼容性 view-timeline-inset
在使用 view() 时说过, 元素在滚动容器的可见性推动了 view progress timeline 的进展. 默认…view-timeline-inset 语法例子 正 scroll-padding 为正正的 length正的 percentage 负 scroll-padding 为负负的 length负的 percentage 兼容性 view-timeline-inset
在使用 view() 时说过, 元素在滚动容器的可见性推动了 view progress timeline 的进展. 默认情况是元素即将出现在滚动容器时, timeline 为 0%, 当 A 完全离开滚动元素时, timeline 为 100%.
有时我们想调整过程, 比如让时间线早点开始或者早点结束, 换句话就是元素从什么位置开始是可见的, 从什么位置之后是不可见的, 这时就是 view-timeline-inset 大放异彩的时候了.
语法
可以是一个值或两个值, 值可以是 auto, 长度值或百分比值.
auto: (默认值)即偏移量是 0. 有的浏览器可能使用启发式的方法决定默认值. 实际上 auto 使用的是 scroll-padding 的值, 但是 scroll-padding 默认为 0, 所以 auto 就默认为 0.长度或百分比: 正值: 如果值是正数, 元素可见和不可见的边界就会从默认位置向内移动.负值: 如果值是负数, 元素可见和不可见的边界就会从默认位置向外移动. 如果是这种值, 就会覆盖 scroll-padding
如果是两个值, 那么第一个值是元素可见边界的偏移, 第二个值是元素不可见边界的偏移. 如果是一个值, 那么开始和结束位置的偏移都是它.
例子
先来看默认, 也就是 auto 的情况.
.container {height: 200px;overflow: auto;
}
.box {animation: appear1 linear both;animation-timeline: view();
}
keyframes appear1 {from { transform: scaleX(0); }to { transform: scaleX(1); }
}div classcontainerLorem...div classbox/divLorem...
/div正
scroll-padding 为正
scroll-padding: 2em;可以看到和前一个例子不同的是, 当元素出现 2em 后才开始动画, 到距离离开位置 2em 时动画就完成了 正的 length
.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
view-timeline-inset: -3em;发现, 当元素开始出现时它已经有了宽度, 当它要消失时, 动画还没有结束. 我截图了它最大宽度作为对比. 负的 percentage
view-timeline-inset: -40%;兼容性 大家假期快乐谢谢你看到这里
