html - 动画CSS下拉悬停菜单

Question

我制作了一个小的 css 下拉按钮/菜单，我现在正在尝试制作动画。

我的菜单最初是从 display: none 到 display:block 当鼠标悬停在父级上时，但我无法对此设置动画 - 所以我尝试切换到 opacity: 0, height: 0 到 opacity: 1, height: auto 但这会导致菜单出现一些奇怪的功能。让我告诉你我的意思。这是原始菜单代码:

HTML:

 <div className="account-dropdown">
      <button className="dropbtn">
        <FormattedMessage
          id="header.account"
          defaultMessage={`Account`} />
      </button>
      <div className="dropdown-content">

        <a>Order History</a>
        <a>Settings</a>
        <a onClick={logOut}>Logout</a>

      </div>
    </div>

scss:

.account-dropdown {
    position: relative;
    display: inline-block;

    &:hover {
      .dropdown-content {
        display: block;

      }

      .dropbtn {
        color: red;
      }
    }

    .dropbtn {
      border: none;
      cursor: pointer;
      margin: 2rem 1rem;
      transition: all 0.3s;
      color: black;
      background-color: #fff;
    }

    .dropdown-content {
      display: none;
      padding: 3rem 3rem 1rem 3rem;
      position: absolute;
      top: 5rem;
      left: -17.6rem;
      background-color: #fff;
      min-width: 250px;
      width: 100%;
      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
      border: solid 1px #e8e8e8;
      z-index: 1;
      color: rgba(0, 0, 0, 0);
      transition: all 0.3s;

      &:after, &:before {
        bottom: 100%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
      }

      &:after {
        border-color: rgba(255, 255, 255, 0);
        border-bottom-color: #ffffff;
        border-width: 7px;
        left: 75%;
        margin-left: 26px;
      }
      &:before {
        border-color: rgba(113, 158, 206, 0);
        border-bottom-color: #e8e8e8;
        border-width: 8px;
        left: 75%;
        margin-left: 25px;
      }


      a {
        text-align: left;
        color: black;
        padding-bottom: .8rem;
        text-decoration: none;
        display: block;
        cursor: pointer;
        transition: all 0.3s;

        &:hover {
          color: black;
        }

        &:last-child {
          margin-top: .4rem;
          padding-top: .8rem;
          border-top: solid 1px #e8e8e8;
        }
      }
    }
  }

它在这里运行得很乱(没有 rems 或 scss 变量)https://jsfiddle.net/tqf1r0mm/7/

这是一个 fiddle ，当我将显示无替换为不透明度和高度时 -> https://jsfiddle.net/tqf1r0mm/10/ .

您可以看到动画很卡，而且如果您将鼠标悬停在帐户按钮下方，菜单会打开(我只希望在用户将鼠标悬停在帐户上时打开)。

关于如何解决这个问题以获得漂亮流畅的动画有什么想法吗？任何建议都会很棒。谢谢!

Answer 1

你可能正在使用属性 transition: all and is 因为动画看起来像那样

但不是使用 height:0;您可以使用:可见性:隐藏；和可见性:在悬停时可见以避免动画问题

像这样

.test {
padding-left: 300px;

.account-dropdown {
position: relative;
display: inline-block;
&:hover {
  .dropdown-content {
    opacity: 1;
    visibility:visible;
  }
  .dropbtn {
    color: black;
  }
}
.dropbtn {
  border: none;
  cursor: pointer;
  margin: 20px 10px;
  transition: all 0.3s;
  color: black;
  background-color: #fff;
}
.dropdown-content {
  opacity: 0;
  visibility:hidden;
  padding: 3rem 3rem 1rem 3rem;
  position: absolute;
  top: 50px;
  left: -176px;
  background-color: #fff;
  min-width: 250px;
  width: 100%;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
  border: solid 1px #e8e8e8;
  z-index: 1;
  color: rgba(0, 0, 0, 0);
  transition: all 0.3s;
  &:after,
  &:before {
    bottom: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
  }
  &:after {
    border-color: rgba(255, 255, 255, 0);
    border-bottom-color: #ffffff;
    border-width: 7px;
    left: 75%;
    margin-left: 26px;
  }
  &:before {
    border-color: rgba(113, 158, 206, 0);
    border-bottom-color: #e8e8e8;
    border-width: 8px;
    left: 75%;
    margin-left: 25px;
  }
  a {
    text-align: left;
    color: black;
    padding-bottom: 8px;
    text-decoration: none;
    display: block;
    cursor: pointer;
    transition: all 0.3s;
    &:hover {
      color: black;
    }
    &:last-child {
      margin-top: 4px;
      padding-top: 8px;
      border-top: solid 1px #e8e8e8;
    }
  }
}
}
}