CSS 滚动驱动动画 view-timeline (view-timeline-name ❤️ view-timeline-axis )

￡神魔★判官ぃ 2024-05-24 03:35 66阅读 0赞

## view-timeline ##

我们之前在 [scroll()][scroll] 中提到了一个因为绝对定位导致滚动无效的问题, 并使用 [scroll-timeline][] 成功解决了这个问题, 而 `scroll-timeline` 起到的作用就是指定到底是哪个元素提供 `scroll progress timeline`.

> 与此相似, `view-timeline` 定义了一个具名的 `view progress timeline`, 通过滚动容器(`scroller`)中的某个元素(`subject`)可见性的改变来推动这个时间线. 而 `view-timeline` 就定义在 `subject` 上.

默认情况, 当 `subject` 将要出现在滚动容器时, 时间线进度是 `0%`; 当 `subject` 刚刚完全离开滚动容器时, 时间线进度是 `100%`.

### 语法 ###

和 `scroll-timeline` 一样, `view-timeline` 也是一个缩写属性, 是 [view-timeline-name][] 和 [view-timeline-axis][] 的缩写.

*  `view-timeline-name`: 为 `view progress timeline` 起一个名字. 名字必须以 `--` 开头. 随后可以在某元素 `animation-timeline` 中使用这个名字表示该元素动画将随着 `timeline` 进行. 这个元素可以是 `subject`, 也可以不是.
    
     *  也可以是关键字 `none`, 表示时间线没有名字
 *  `view-timeline-axis`: (可选)包含 `block(默认)`, `inline`, `y`, `x`. 具体解释见 scroll()

### 例子 ###

在我实际测试的过程中, 发现并不能随意指定元素. 而是 `subject` 或 `subject` 的子元素.

<div class="container">
      Lorem ipsum ...
      <div class="box">
        <div class="text">123123123123123123123123</div>
      </div>
      Lorem ipsum ...
    </div>

.container {
        
      width: 400px;
      height: 200px;
      overflow: auto;
    }
    .box {
        
      width: 50%;
      height: 30px;
      view-timeline: --from-here-to-there; /* 设置时间线 */
    }
    @keyframes appear1 {
        
      from {
         transform: scaleX(0); }
      to {
         transform: scaleX(1); }
    }
    .text {
        
      animation: appear1 ease both;
      animation-timeline: --from-here-to-there;
    }

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

谢谢你看到这里?

[scroll]: https://blog.csdn.net/broken_promise/article/details/132656760
[scroll-timeline]: https://blog.csdn.net/broken_promise/article/details/132916221
[view-timeline-name]: https://developer.mozilla.org/en-US/docs/Web/CSS/view-timeline-name
[view-timeline-axis]: https://developer.mozilla.org/en-US/docs/Web/CSS/view-timeline-axis
[9fbaf03fb2bb4542a5f29b0b79448e59.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/ac4e2284ddd84c61b8faf22d927ba789.gif