菜单项上的 CSS 过渡不起作用

Question

这是我第一次使用css转换/转换，但效果不佳。我只是试图从底部翻译到定位切换菜单的每个条目，但我得到了奇怪的结果。当我在我的应用程序中运行代码时，它只对列表的第一项而不是所有项执行转换。当我从 jsfiddle 运行相同的代码时，过渡在任何项目上都不起作用。

请在这里看我的jsfiddle

我已经查看了文档，许多不同的示例以及针对类似问题的许多其他解决方案。我已经尝试了所有这些，无视身高，删除显示，但似乎没有任何区别

<header>
  <a id="menu">
    <i class="fas fa-bars"></i>
  </a>
</header>
<nav class="nav nav-sm">
  <ul class="nav__list">
    <li class="nav__item"><a href="#">ABOUT</a></li>
    <li class="nav__item"><a href="#">SKILLS</a></li>
    <li class="nav__item"><a href="#">WORKS</a></li>
  </ul>
</nav>

header {
  width: 100%;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: right;
  background-color: #68c7c1;
  min-height: 56px;
  transition: min-height 0.3s;
}
header #menu {
  margin-left: auto;
  margin-right:10px;
  color: #eceeef;
  font-size: 2em;
}
.nav {
  width: 100%;
  height: auto;
  position: absolute;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  background-color: #68c7c1;
}
.nav-sm, .nav-lg { display: none; }
.nav-sm.open {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  height: calc(100% - 56px);
  margin-top: -2px;
}
.nav__list, .nav__item { width: 100%; }
.nav__list {
  display: flex;
  flex-wrap: wrap;
}
.nav__item {
  height:50px;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
}
.nav__item a {
  text-decoration: none;
  text-align: center;
  font-size: 1.2em;
  color: #eceeef;
}
.nav-sm .nav__list .nav__item {
  color: red;
  transition: -transform 3s ease-in-out;
  -moz-transition: -moz-transform 3s ease-in-out;
  -webkit-transition: -webkit-transform 3s ease-in-out;
}
.nav-sm.open .nav__item {
  padding-bottom: 80px;
  font-size: 2em;
  transform: translate(0,-50px);
  -moz-transform: translate(0,-50px);
  -webkit-transform: translate(0,-50px);
}

我试图实现的一个例子类似于这个投资组合的菜单。

Answer 1

你到底想做什么？ 动画 ？ 点击时过渡 ？

下面是如何通过CSS编写动画的示例：

div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}
/* Standard syntax */
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

Answer 2

他们在您提供的示例中执行此操作的方式是使用 js 和一些动画库，如果您检查他们的代码，您可以看到它发生。

为了实现此动画，我们必须使用动画或过渡来利用 delay 属性，并且您必须在每个项目上添加延迟，因此当您向菜单中添加新项目时，您必须为该项目添加延迟，我们可以使用js

这是一个使用过渡的演示，timing function，延迟和持续时间需要格外小心，我将让您根据所需的最终结果进行调整。

var menu = document.querySelector("#menu");
var nav = document.querySelector(".nav-sm");
function openMenu(e) {
  nav.classList.toggle("open");
  e.stopPropagation();
};
function closeMenu(e) {
  nav.classList.remove("open");
};
menu.addEventListener("click", openMenu);

#menu {
  font-size: 2rem;
  margin: 30px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
ul {
  border: 1px solid;
  list-style: none;
  padding: 10px;
  margin: 30px;
}
li {
  opacity: 0;
  transform: translateY(5px);
  margin: 20px 0;
  text-align: center;
}
a {
  text-decoration: none;
  padding: 5px 30px;
  background: dodgerblue;
  color: white;
}
.open li:nth-child(1) {
  transition: all .4s linear;
}
.open li:nth-child(2) {
  transition: all .4s .2s linear;
}
.open li:nth-child(3) {
  transition: all .4s .4s linear;
}
.open li {
  opacity: 1;
  transform: translateY(0px);
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">
<div id="menu">
  <i class="fas fa-bars"></i>
</div>
<ul class="nav-sm">
  <li><a href="#">ABOUT</a></li>
  <li><a href="#">SKILLS</a></li>
  <li><a href="#">WORKS</a></li>
</ul>

Answer 3

因此，我设法通过将两个建议混合在一起来实现我想要的:)请在此jsfiddle中查看结果。

转换不起作用的原因是因为我在 .nav 上使用 display：none 。此问题可通过改用动画并在每个列表元素上应用延迟来解决。

谢谢你的两个答案！

header {
  width: 100%;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: right;
  background-color: #68c7c1;
  min-height: 56px;
  transition: min-height 0.3s;
}
header #menu {
  margin-left: auto;
  margin-right:10px;
  color: #eceeef;
  font-size: 2em;
}
.nav {
  width: 100%;
  height: auto;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  background-color: #68c7c1;
}
.nav-sm, .nav-lg { display: none; }
.nav-sm.open {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  height: calc(100% - 56px);
  margin-top: -2px;
}
.nav__list, .nav__item { width: 100%; }
.nav__list {
  display: flex;
  flex-wrap: wrap;
}
.nav__item {
  height:50px;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
}
.nav__item a {
  text-decoration: none;
  text-align: center;
  font-size: 1.2em;
  color: #eceeef;
}
.nav-sm.open {
  -webkit-animation: slide-down .3s linear;
  -moz-animation: slide-down .3s linear;
}
.nav-sm.open .nav__item{
  padding-bottom: 80px;
  font-size: 2em;
}
.nav-sm.open .nav__item:nth-child(1) {
  -webkit-animation: slide-down .3s .1s linear;
  -moz-animation: slide-down .3s .1s linear;
}
.nav-sm.open .nav__item:nth-child(2) {
  -webkit-animation: slide-down .3s .2s linear;
  -moz-animation: slide-down .3s .2s linear;
}
.nav-sm.open .nav__item:nth-child(3) {
  -webkit-animation: slide-down .3s .3s linear;
  -moz-animation: slide-down .3s .3s linear;
}
@-webkit-keyframes slide-down {
      0% { opacity: 0; -webkit-transform: translateY(-100%); }   
    100% { opacity: 1; -webkit-transform: translateY(0%); }
}
@-moz-keyframes slide-down {
      0% { opacity: 0; -moz-transform: translateY(-100%); }   
    100% { opacity: 1; -moz-transform: translateY(0%); }
}