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 vars）https://jsfiddle.net/tqf1r0mm/7/

当我将display none替换为不透明度和高度时，这是一个小提琴 - ＆gt; https://jsfiddle.net/tqf1r0mm/10/。

您可以看到动画很简陋，如果您将鼠标悬停在帐户按钮下方，菜单也会打开（我只想在用户悬停帐户时打开它）。

有关如何修复此问题以获得平滑动画的任何想法？任何建议都会很棒。谢谢！

Answer 1

你可能正在使用属性转换：all，因为动画看起来像那样

但不是使用height：0;你可以使用：visibility：hidden;和可见性：悬停时可见以避免该动画问题

类似这样的事情

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

Answer 2

使用可见性而不是高度，但也使用不透明度，因为您也无法为可见性制作动画。同时将触发器放在.dropbtn而不是.account-dropdown上，以避免在将鼠标悬停在除按钮之外的任何位置时激活悬停状态。

我不了解SCSS所以我使用CodePen转换为常规CSS。这是我使用的代码：

＆＃13;

class FaceViewController: UIViewController {

@IBOutlet weak var faceView: FaceView!{
    didSet {
        let handlerPinch = #selector(FaceView.changeScale(byReactingOn:))
        let pichRecognizer = UIPinchGestureRecognizer(target: faceView, action: handlerPinch)
        faceView.addGestureRecognizer(pichRecognizer)

        let handlerTap = #selector(openEyes(byReactingOn:))
        let tapRecognizer = UITapGestureRecognizer(target: self, action: handlerTap)
        faceView.addGestureRecognizer(tapRecognizer)

＆＃13;

.test {
  padding-left: 300px;
}

.test .account-dropdown {
  position: relative;
  display: inline-block;
}

.test .account-dropdown .dropbtn:hover~.dropdown-content {
  visibility: visible;
  opacity: 1;
}

.test .account-dropdown .dropdown-content:hover {
  visibility: visible;
  opacity: 1;
}

.test .account-dropdown:hover .dropbtn {
  color: black;
}

.test .account-dropdown .dropbtn {
  border: none;
  cursor: pointer;
  margin: 20px 10px;
  transition: all 0.3s;
  color: black;
  background-color: #fff;
}

.test .account-dropdown .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: transparent;
  transition: all 0.3s;
}

.test .account-dropdown .dropdown-content:after,
.test .account-dropdown .dropdown-content:before {
  bottom: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.test .account-dropdown .dropdown-content:after {
  border-color: rgba(255, 255, 255, 0);
  border-bottom-color: #ffffff;
  border-width: 7px;
  left: 75%;
  margin-left: 26px;
}

.test .account-dropdown .dropdown-content:before {
  border-color: rgba(113, 158, 206, 0);
  border-bottom-color: #e8e8e8;
  border-width: 8px;
  left: 75%;
  margin-left: 25px;
}

.test .account-dropdown .dropdown-content a {
  text-align: left;
  color: black;
  padding-bottom: 8px;
  text-decoration: none;
  display: block;
  cursor: pointer;
  transition: all 0.3s;
}

.test .account-dropdown .dropdown-content a:hover {
  color: black;
}

.test .account-dropdown .dropdown-content a:last-child {
  margin-top: 4px;
  padding-top: 8px;
  border-top: solid 1px #e8e8e8;
}

＆＃13;

当您将鼠标悬停在.dropdown-content上时，我还添加了另一个悬停类，否则当您尝试点击其中一个链接时，它会消失。

动画css下拉悬停菜单

2 个答案: