Question

我有几个div元素，它们嵌套在div类中，且类别为.menu；我们的想法是将每个元素从外边缘开始依次从上到下过渡到页面中。我以为我可以使用:nth-child(n)完成此操作，但由于某些原因，我无法使其适合职位。我使用transition: 1s left/right进行的过渡就很好。但是，我决定在每个初始过渡之间都需要延迟以实现良好的视觉效果。我去了W3 Schools，并研究了animation的{{1}}功能，并决定需要以下内容：

CSS

我不相信这会按我预期的方式工作，因为我根本没有动画。这可能与.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(odd/even)的顺序从屏幕的外部边缘正确过渡元素？如果您想在答案中提供一些建议：

这种方法有哪些潜在的陷阱？
- 除了确保我使用诸如L, R, L, R, L, R之类的跨浏览器标签之外。
关于这种行为，我应该考虑几点？

Answer 1

一些注意事项：

.menu:nth-child(1)将在寻找class="menu"元素，该元素是其父元素的第一个子元素。没有您的上下文，我无法确定它是否存在，但是在这种情况下可能不是您想要的。
nth-child()从1开始，而不是0。
div:nth-child(1)仅适用于父元素的第一个子元素<div>。如果您看一下HTML，则<div>元素都不是其父元素的第一个子元素。您可以改为从div:nth-child(2)开始。
您可以提取一些常用的内容，然后将其放入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>

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

1 个答案: