单击时从'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

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