点击时从'display : none'到'display:inline'的串联

Question

我尝试创建一个带有子菜单的菜单，该子菜单将使用带有属性转换的CSS缓慢显示。

为此，菜单出现了，我使用javascript:更改了上面元素的类

$('.menu>li').each(function()
{
$(this).removeClass('current');
var elem = this;
$(elem).find('>a').click(function(event)
{
if ($(elem).find('.submenu').length)
{
event.preventDefault();
if($(elem).hasClass('current'))
{
$(elem).removeClass('current');
}
else
{
$('.current').removeClass('current');
$(elem).toggleClass('current');
}
}
});
});

.menu li .submenu
{
display:none;
transition: all 2s linear;
}
.menu .current .submenu
{
display:inline;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class='menu'>
<li><a href='#'>Menu 1</a>
<ul class='submenu'>
<li>Subemenu 1.1</li>
<li>Subemenu 1.2</li>
<li>Subemenu 1.3</li>
</ul>
</li>
<li><a href='#'>Menu 2</a>
<ul class='submenu'>
<li>Subemenu 2.1</li>
<li>Subemenu 2.2</li>
<li>Subemenu 2.3</li>
</ul>
</li>
</ul>

但这种转变并不奏效，我不明白为什么。

谢谢你的帮助。

Answer 1

您不能转换它，因为在原始值和结束值之间没有值。

您需要转换一个可设置动画的属性。

https://www.w3schools.com/cssref/css_animatable.asp

大多数具有值编号的属性都是可动画化的