在 Chrome 演示中我发现了这段代码:
@supports(animation-timeline: view()) {
@keyframes fade-in-on-enter--fade-out-on-exit {
entry 0% {
opacity: 0;
transform: translateY(100%);
}
entry 100% {
opacity: 1;
transform: translateY(0);
}
exit 0% {
opacity: 1;
transform: translateY(0);
}
exit 100% {
opacity: 0;
transform: translateY(-100%);
}
}
#list-view > ul > li {
animation: linear fade-in-on-enter--fade-out-on-exit;
animation-timeline: view();
}
}
我没有在任何地方找到任何信息entry
或exit
文字,谁知道它是什么?
工作示例(Chrome 117)
*,
*::before,
*::after {
box-sizing: border-box;
}
#list-view {
height: 100%;
overflow-y: auto;
}
ul {
counter-reset: index;
}
ul,
li {
list-style: none;
margin: 0;
padding: 0;
}
#list-view {
height: 80vh;
width: 50vw;
margin: 0 auto;
}
li {
height: 5em;
border: none;
border-bottom: 1px solid #ddd;
counter-increment: index;
display: flex;
align-items: center;
gap: 1em;
padding: 1em;
}
li .name::after {
content: " (item #" counter(index) ")";
font-family: monospace;
font-size: 0.8em;
}
li .name {
flex: 1;
}
li .avatar {
content: "";
display: inline-block;
vertical-align: middle;
width: 2.5em;
height: 2.5em;
background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSIzMnB4IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAzMiAzMjsiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDMyIDMyIiB3aWR0aD0iMzJweCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDpub25lO3N0cm9rZTojNDM0MzQ1O3N0cm9rZS13aWR0aDoyO3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoxMDt9Cgkuc3Qxe2ZpbGw6IzQzNDM0NTt9Cjwvc3R5bGU+PGcgaWQ9IkxheWVyXzIiLz48ZyBpZD0iTGF5ZXJfMSI+PGc+PHBhdGggY2xhc3M9InN0MCIgZD0iTTMxLDE2YzAsNC42NTk5Ny0yLjEzLDguODI5OTYtNS40Njk5NywxMS41Nzk5NkMyMi45NCwyOS43MTk5NywxOS42MiwzMSwxNiwzMSAgICBzLTYuOTQtMS4yODAwMy05LjUzMDAzLTMuNDIwMDRDMy4xMywyNC44Mjk5NiwxLDIwLjY1OTk3LDEsMTZDMSw3LjcxOTk3LDcuNzE5OTcsMSwxNiwxUzMxLDcuNzE5OTcsMzEsMTZ6Ii8+PHBhdGggY2xhc3M9InN0MCIgZD0iTTIyLjUsMTEuNWMwLDIuNDUyNjMtMS4zNjA2Nyw1LjQwNzk5LTMuMzgwMDIsNy4wMjg2NWMtMC4wMzQ2NSwwLjAyNjAzLTAuMDY5MjksMC4wNTItMC4xMDM5OSwwLjA3ODAyICAgIGMtMC45MDEzMiwwLjcwMi0xLjkyMzk3LDEuMTI2NjYtMy4wMTU5OCwxLjEyNjY2cy0yLjExNDY3LTAuNDI0NjYtMy4wMTU5OC0xLjEyNjY2Yy0wLjAzNDctMC4wMjYwMy0wLjA2OTM1LTAuMDUyLTAuMTA0LTAuMDc4MDIgICAgQzEwLjg2MDY3LDE2LjkwNzk5LDkuNSwxMy45NTI2Myw5LjUsMTEuNUM5LjUsNy45MTE5OSwxMi40MTE5OSw1LDE2LDVTMjIuNSw3LjkxMTk5LDIyLjUsMTEuNXoiLz48cGF0aCBjbGFzcz0ic3QwIiBkPSJNMjUuNTMwMDMsMjcuNTI5OTd2MC4wNDk5OUMyMi45NCwyOS43MTk5NywxOS42MiwzMSwxNiwzMXMtNi45NC0xLjI4MDAzLTkuNTMwMDMtMy40MjAwNHYtMC4wNDk5OSAgICBjMC00LjE2OTk4LDIuNjcwMDQtNy43MTk5Nyw2LjQxMDAzLTljMC4wMjk5NywwLjAyMDAyLDAuMDcwMDEsMC4wNDk5OSwwLjA5OTk4LDAuMDgwMDIgICAgYzAuOTEwMDMsMC43MDAwMSwxLjkyOTk5LDEuMTIsMy4wMjAwMiwxLjEyczIuMTA5OTktMC40MTk5OCwzLjAyMDAyLTEuMTJjMC4wMjk5Ny0wLjAzMDAzLDAuMDcwMDEtMC4wNiwwLjA5OTk4LTAuMDgwMDIgICAgQzIyLjg1OTk5LDE5LjgxLDI1LjUzMDAzLDIzLjM1OTk5LDI1LjUzMDAzLDI3LjUyOTk3eiIvPjwvZz48L2c+PC9zdmc+");
background-size: 100%;
}
@supports(animation-timeline: view()) {
@keyframes fade-in-on-enter--fade-out-on-exit {
entry 0% {
opacity: 0;
transform: translateY(100%);
}
entry 100% {
opacity: 1;
transform: translateY(0);
}
exit 0% {
opacity: 1;
transform: translateY(0);
}
exit 100% {
opacity: 0;
transform: translateY(-100%);
}
}
#list-view>ul>li {
animation: linear fade-in-on-enter--fade-out-on-exit;
animation-timeline: view();
}
}
<div id="list-view">
<ul>
<li>
<span class="avatar"></span>
<span class="name">Adam Argyle</span>
</li>
<li>
<span class="avatar"></span>
<span class="name">Adriana Jara</span>
</li>
<li>
<span class="avatar"></span>
<span class="name">Andre Bandarra</span>
</li>
<li>
<span class="avatar"></span>
<span class="name">Alexandra White</span>
</li>
<li>
<span class="avatar"></span>
<span class="name">Ali Spivak</span>
</li>
<li>
<span class="avatar"></span>
<span class="name">Anusmita Ray</span>
</li>
<li>
<span class="avatar"></span>
<span class="name">Barry Pollard</span>
</li>
<li>
<span class="avatar"></span>
<span class="name">Bramus Van Damme</span>
</li>
<li>
<span class="avatar"></span>
<span class="name">Brendan Kenny</span>
</li>
<li>
<span class="avatar"></span>
<span class="name">Carol Rivero</span>
</li>
<li>
<span class="avatar"></span>
<span class="name">Eiji Kitamura</span>
</li>
<li>
<span class="avatar"></span>
<span class="name">Ewa Gasperowicz</span>
</li>
<li>
<span class="avatar"></span>
<span class="name">François Beaufort</span>
</li>
<li>
<span class="avatar"></span>
<span class="name">Jack J</span>
</li>
<li>
<span class="avatar"></span>
<span class="name">Jake Archibald</span>
</li>
<li>
<span class="avatar"></span>
<span class="name">Jecelyn Yeen</span>
</li>
<li>
<span class="avatar"></span>
<span class="name">Jeremy Wagner</span>
</li>
<li>
<span class="avatar"></span>
<span class="name">Joe Medley</span>
</li>
<li>
<span class="avatar"></span>
<span class="name">Kevin Lee</span>
</li>
<li>
<span class="avatar"></span>
<span class="name">Marc Doerrenhaus</span>
</li>
<li>
<span class="avatar"></span>
<span class="name">Mariko Kosaka</span>
</li>
<li>
<span class="avatar"></span>
<span class="name">Maud Nalpas</span>
</li>
<li>
<span class="avatar"></span>
<span class="name">Matthias Rohmer</span>
</li>
<li>
<span class="avatar"></span>
<span class="name">Milica Mihajlija</span>
</li>
<li>
<span class="avatar"></span>
<span class="name">Oliver Dunk</span>
</li>
<li>
<span class="avatar"></span>
<span class="name">Patrick Kettner</span>
</li>
<li>
<span class="avatar"></span>
<span class="name">Paul Kinlan</span>
</li>
<li>
<span class="avatar"></span>
<span class="name">Pete LePage</span>
</li>
<li>
<span class="avatar"></span>
<span class="name">Philip Walton</span>
</li>
<li>
<span class="avatar"></span>
<span class="name">Rachel Andrew</span>
</li>
<li>
<span class="avatar"></span>
<span class="name">Rick Viscomi</span>
</li>
<li>
<span class="avatar"></span>
<span class="name">Robert Nyman</span>
</li>
<li>
<span class="avatar"></span>
<span class="name">Rowan Merewood</span>
</li>
<li>
<span class="avatar"></span>
<span class="name">Sam Dutton</span>
</li>
<li>
<span class="avatar"></span>
<span class="name">Sebastian Benz</span>
</li>
<li>
<span class="avatar"></span>
<span class="name">Sofia Emelianova</span>
</li>
<li>
<span class="avatar"></span>
<span class="name">Thomas Steiner</span>
</li>
<li>
<span class="avatar"></span>
<span class="name">Una Kravets</span>
</li>
</ul>
</div>
entry
如果您沿一个轴和exit
另一个轴设置动画,情况就会变得更加清晰。我决定动画化
entry
- x 轴exit
- y 轴滚动容器时
entry
exit