几何形状的阴影

Question

Михаил Камахин

Asked:2023-10-07 05:17:42 +0000 UTC2023-10-07 05:17:42 +0000 UTC 2023-10-07 05:17:42 +0000 UTC

关键帧的进入和退出是什么意思？

772

在 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>

1 个回答

Voted

Михаил Камахин · Answer 1 · 2023-10-07T18:42:08Z

entry如果您沿一个轴和exit另一个轴设置动画，情况就会变得更加清晰。

我决定动画化

对于entry- x 轴
对于exit- y 轴

滚动容器时

底部的元素根据规则进行动画处理entry
顶部的元素根据规则进行动画处理exit

*,
*::before,
*::after {
  box-sizing: border-box;
}

#list-view {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}

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: translateX(100%);
    }
    entry 100% {
      opacity: 1;
      transform: translateX(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>

关键帧的进入和退出是什么意思？

我看不懂措辞

请求的模块“del”不提供名为“default”的导出

"!+tab" 在 HTML 的 vs 代码中不起作用

我正在尝试解决“猜词”的问题。Python

可以使用哪些命令将当前指针移动到指定的提交而不更改工作目录中的文件？

Python解析野莓

问题：“警告：检查最新版本的 pip 时出错。”

帮助编写一个用值填充变量的循环。解决这个问题

尽管依赖数组为空，但在渲染上调用了 2 次 useEffect

数据不通过 Telegram.WebApp.sendData 发送

关键帧的进入和退出是什么意思？

1 个回答

相关问题