0

这是我第一次使用 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);
}

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

4

3 回答 3

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;}
}
于 2019-07-23T21:02:34.500 回答
1

他们在您提供的示例中执行此操作的方式是使用带有一些动画库的 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>

于 2019-07-23T23:58:38.313 回答
0

所以，我设法通过混合这两个建议来实现我想要的:) 请在这个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%); }
}
于 2019-07-27T09:29:29.723 回答