html - 使用 CSS 按顺序对 div 元素进行动画处理？

Question

我有一些 div 元素，它们嵌套在带有 .menu 类的 div 中；这个想法是将每个元素从外边缘按顺序从上到下过渡到页面中。我以为我可以使用 :nth-child(n) 来完成此任务，但由于某种原因我无法让它与位置一起工作。我的转换工作得很好，只需 transition: 1s left/right。然而，我决定希望在每个初始转换之间有一个延迟，以实现良好的视觉效果。我去了W3 Schools并研究了 CSS 的 animation 功能的使用，并决定我需要以下内容:

.menu div { position: relative; }
.menu:nth-child(0) {
    left: 60%;
    animation: 1s transitionLeft forwards;
}
.menu:nth-child(1) {
    right: 60%;
    animation: 1s transitionRight forwards;
    animation-delay: 0.5s;
}
@keyframes transitionLeft { 100% { left: 0; } }
@keyframes transitionRight { 100% { right: 0; } }

我不相信这会按照我期望的方式工作，因为我根本没有得到任何动画；这可能与 .main->div:a, div:a, ... 的嵌套有关。以下是当前的代码:

body {
  background-color: #222;
  color: #fff;
}
.menu {
  transition: 1s all;
  text-align: center;
  overflow: hidden;
  padding-bottom: 5%;
}
.menu > h1 {
  transition: 1s all;
  cursor: default;
  font-size: 10vw;
  margin: 2% 0 0 0;
}
.menu a {
  transition: 0.25s all;
  text-decoration: none;
  color: #fff;
  margin: 10px 0 10px 0;
  font-size: 3vw;
}
.menu div { position: relative; }
.menu div:nth-child(0) {
  left: 60%;
  animation-name: transitionLeft;
  animation: 1s transitionLeft forwards;
}
.menu div:nth-child(1) {
  right: 60%;
  animation: 1s transitionRight forwards;
  animation-delay: 0.5s;
}
@keyframes transitionLeft { 100% { left: 0; } }
@keyframes transitionRight { 100% { right: 0; } }

<div class="menu">
  <h1>Perpetual J Studios</h1>
  <div><a href="#">About</a></div>
  <div><a href="#">Contact</a></div>
  <div><a href="#">Games</a></div>
  <div><a href="#">Software</a></div>
  <div><a href="#">Apps</a></div>
  <div><a href="#">Academy</a></div>
</div>

我能够得到 transition: 1s left/right 来处理 .main div:nth-child(odd/even) 但不能处理 .main :nth-child(奇/偶)。这是为什么？

---

这个问题的主要焦点是我应该如何以 L、R、L、R、L、R 顺序从屏幕外边缘正确过渡元素？如果您想在回答中提供一些建议:

• 这种方法有哪些潜在的陷阱？
  • 除了确保使用 webkit 等跨浏览器标签。
• 对于这种行为，我应该考虑哪些要点？

Answer 1

需要注意的几点:

1. .menu:nth-child(1)将寻找 class="menu"元素是其父元素的第一个子元素。如果没有您的上下文，我无法判断这是否存在，但在这种情况下它可能不是您想要的。

2. nth-child()从 1 开始，不是0 .

3. div:nth-child(1)仅适用于<div>其父元素的第一个子元素。如果你看一下你的 HTML，你的 <div> 都没有。元素是其父元素的第一个子元素。您可以从div:nth-child(2)开始相反。

4. 你可以拿出一些常见的东西并将其放入 nth-child(odd) 中。和nth-child(even)以避免太多重复。

整理一下，您可能会看到类似下面的代码的内容。 (我已经缩小了我没有触及的大部分 CSS，只是为了让我更清楚地了解我更改的内容)

.menu,.menu>h1{transition:1s all}body{background-color:#222;color:#fff}.menu{text-align:center;overflow:hidden;padding-bottom:5%}.menu>h1{cursor:default;font-size:10vw;margin:2% 0 0}.menu a{transition:.25s all;text-decoration:none;color:#fff;margin:10px 0;font-size:3vw}.menu div{position:relative}@keyframes transitionLeft{100%{left:0}}@keyframes transitionRight{100%{right:0}}

.menu div:nth-child(odd) {       
  right: 60%;
  animation: 1s transitionRight forwards;
}

.menu div:nth-child(even) {
  left: 60%;
  animation: 1s transitionLeft forwards;
}

.menu div:nth-child(3) { animation-delay: 0.5s; }
.menu div:nth-child(4) { animation-delay: 1.0s; }
.menu div:nth-child(5) { animation-delay: 1.5s; }
.menu div:nth-child(6) { animation-delay: 2.0s; }
.menu div:nth-child(7) { animation-delay: 2.5s; }

<div class="menu">
  <h1>Perpetual J Studios</h1>
  <div><a href="#">About</a></div>
  <div><a href="#">Contact</a></div>
  <div><a href="#">Games</a></div>
  <div><a href="#">Software</a></div>
  <div><a href="#">Apps</a></div>
  <div><a href="#">Academy</a></div>
</div>