我制作了一个小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/。
您可以看到动画很简陋，如果您将鼠标悬停在帐户按钮下方，菜单也会打开（我只想在用户悬停帐户时打开它）。
有关如何修复此问题以获得平滑动画的任何想法？任何建议都会很棒。谢谢！
答案 0 :(得分：2)
你可能正在使用属性转换：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;
}
}
}
}
}
答案 1 :(得分：1)
使用可见性而不是高度，但也使用不透明度，因为您也无法为可见性制作动画。同时将触发器放在.dropbtn而不是.account-dropdown上，以避免在将鼠标悬停在除按钮之外的任何位置时激活悬停状态。
我不了解SCSS所以我使用CodePen转换为常规CSS。这是我使用的代码：
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)
.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;
}
当您将鼠标悬停在.dropdown-content上时，我还添加了另一个悬停类，否则当您尝试点击其中一个链接时，它会消失。