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

快来打我* 2024-05-24 03:36 70阅读 0赞

*  view-timeline-inset
    
     *  语法
     *  例子?
        
         *  正
            
             *  scroll-padding 为正
             *  正的 length
             *  正的 percentage
         *  负
            
             *  scroll-padding 为负
             *  负的 length
             *  负的 percentage
     *  兼容性

## view-timeline-inset ##

在使用 [view()][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 class="container">
      Lorem...
      <div class="box"></div>
      Lorem...
    </div>

![在这里插入图片描述][34a6e1087b5f41d5a0e308f066baf602.gif_pic_center]

#### 正 ####

##### `scroll-padding` 为正 #####

scroll-padding: 2em;

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

![在这里插入图片描述][d6587ef0c31e479aa35f61a507c5899b.gif_pic_center]

##### 正的 `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` 好像不对付, 两个属性在一块后者死活不生效, 但是我查了一圈也没查出来个所以然.  
![在这里插入图片描述][f316ec94acc3402e88fd3d870496a611.gif_pic_center]

我很好奇, 如果高度设置的足够大, 大到开始位置是原来结束的位置, 结束的位置反过来到开始的位置会怎么样?  
![在这里插入图片描述][22b60b7ffb2b4fcfa5b1d7c7f1a14ca6.png_pic_center]

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

![在这里插入图片描述][39ba1506b66847d5be2172ef535ec7de.gif_pic_center]

##### 正的 `percentage` #####

`percentage` 显然是根据滚动轴来算的, 例子中的情况是 y 轴滚动, 那么就是按高度来算, `200px * 20% = 40px`  
![在这里插入图片描述][6bdc25d3c6f14d0bae779ede8ce0c0c2.gif_pic_center]

#### 负 ####

##### `scroll-padding` 为负 #####

?♂️?♂️ 负值没有效果, 相当于 `0`.

##### 负的 `length` #####

view-timeline-inset: -3em;

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

![在这里插入图片描述][e0767186c8cc403fb6adef8b7c6558c7.gif_pic_center]

##### 负的 `percentage` #####

view-timeline-inset: -40%;

![在这里插入图片描述][e5195579d7cd4f10bf06f3988713e797.gif_pic_center]

### 兼容性 ###

![在这里插入图片描述][c7e8caacb09340ddb85c31182e3e6043.png_pic_center]

大家假期快乐～谢谢你看到这里?

[view]: https://blog.csdn.net/broken_promise/article/details/132773754
[scroll-padding]: https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding
[34a6e1087b5f41d5a0e308f066baf602.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/272a6e41768d4153aa470425212b9a7a.gif
[d6587ef0c31e479aa35f61a507c5899b.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/46b4027dfbbe4bd989c298a5f5acc122.gif
[f316ec94acc3402e88fd3d870496a611.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/70d09c3efbf94639b4343b7da2097ee6.gif
[22b60b7ffb2b4fcfa5b1d7c7f1a14ca6.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/e925e75dd14841249b0b40b1054e0d90.png
[39ba1506b66847d5be2172ef535ec7de.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/741d164d187948da98053061bf97aa5a.gif
[6bdc25d3c6f14d0bae779ede8ce0c0c2.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/f5fb139bbc2f4a568133081b5a9219e9.gif
[e0767186c8cc403fb6adef8b7c6558c7.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/daa1afc426674306bcaf39ea96d4c2d5.gif
[e5195579d7cd4f10bf06f3988713e797.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/637e8b26c7f848f6b47b40ebcb9ef6f4.gif
[c7e8caacb09340ddb85c31182e3e6043.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/adfa8251cce74f01a7b157a1f32288df.png