view-timeline
我們之前在 scroll() 中提到了一個因為絕對定位導(dǎo)致滾動無效的問題, 并使用 scroll-timeline 成功解決了這個問題, 而 scroll-timeline 起到的作用就是指定到底是哪個元素提供 scroll progress timeline.
與此相似,
view-timeline定義了一個具名的view progress timeline, 通過滾動容器(scroller)中的某個元素(subject)可見性的改變來推動這個時間線. 而view-timeline就定義在subject上.
默認(rèn)情況, 當(dāng) subject 將要出現(xiàn)在滾動容器時, 時間線進(jìn)度是 0%; 當(dāng) subject 剛剛完全離開滾動容器時, 時間線進(jìn)度是 100%.
語法
和 scroll-timeline 一樣, view-timeline 也是一個縮寫屬性, 是 view-timeline-name 和 view-timeline-axis 的縮寫.
-
view-timeline-name: 為view progress timeline起一個名字. 名字必須以--開頭. 隨后可以在某元素animation-timeline中使用這個名字表示該元素動畫將隨著timeline進(jìn)行. 這個元素可以是subject, 也可以不是.- 也可以是關(guān)鍵字
none, 表示時間線沒有名字
- 也可以是關(guān)鍵字
-
view-timeline-axis: (可選)包含block(默認(rèn)),inline,y,x. 具體解釋見 scroll()
例子
在我實際測試的過程中, 發(fā)現(xiàn)并不能隨意指定元素. 而是 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; /* 設(shè)置時間線 */
}
@keyframes appear1 {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
.text {
animation: appear1 ease both;
animation-timeline: --from-here-to-there;
}
文章來源：http://www.zghlxwxcb.cn/news/detail-718025.html
謝謝你看到這里??文章來源地址http://www.zghlxwxcb.cn/news/detail-718025.html
到了這里，關(guān)于CSS 滾動驅(qū)動動畫 view-timeline (view-timeline-name ?? view-timeline-axis )的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
