我目前正在设计一种CSS'mega dropdown'菜单 - 基本上是一个普通的CSS-only下拉菜单,但包含不同类型的内容.
目前,似乎CSS3过渡不适用于"display"属性,即你不能做任何类型的过渡display: none到display: block(或任意组合).
当有人将鼠标悬停在其中一个顶级菜单项上时,是否有人会想到上述示例中的第二层菜单可以"淡入"？
我知道你可以在visibility:属性上使用转换,但我想不出有效利用它的方法.
我也尝试过使用身高,但这只是失败了.
我也知道使用JavaScript实现这一点是微不足道的,但是我想挑战自己只使用CSS而且我认为我有点短.
所有和任何建议最受欢迎.
我有 2div秒，其中之一是通过display:none;. 两者在属性上都有相同的 css 过渡right。
如果我更改属性right通过jQuery和显示被隐藏的div，无论是使用$.css('display','none')或$.show()或$.toggle()等，隐藏DIV的结束位置瞬间画
$('button').on('click',function(){
$('.b').show();
$('.b').css('right','80%');
$('.a').css('right','80%');
})body {
width:800px;
height:800px;
}
div {
width:50px;
height:50px;
background-color:#333;
position:absolute;
display:none;
right:5%;
top:0;
transition:right .5s cubic-bezier(0.645, 0.045, 0.355, 1);
color: white;
}
.a {
display:block;
top:60px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='a'>A
</div>
<div class='b'>B
</div>
<button>Launch</button>如果我使用$.animate()它会起作用。但我的问题是；这是错误还是正常行为？