CSS 菜单项上的转换不起作用

Question

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

请看我的jsfiddle here

我查看了文档、许多不同的示例以及针对类似问题的许多其他解决方案。我都试过了，挑战高度，去掉显示器，但似乎没有任何区别

<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);
}

我想要实现的一个例子是类似于 this 投资组合的菜单。

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 和一些动画库，如果您检查他们的代码，您可以看到它正在发生。

要实现此动画，我们必须使用延迟属性无论是使用动画还是过渡，您都必须为每个项目添加延迟，因此当您将新项目添加到您必须为该项目添加延迟的菜单，我们可以使用 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%); }
}

CSS 菜单项上的转换不起作用

CSS Transitions on menu items not working

css

css-transitions

css-transforms