javascript - 单击时从 'display : none' 过渡到 'display:inline'

<分区>

我尝试创建一个带有子菜单的菜单，该菜单将使用带有属性转换的 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>

但是转换不起作用，我不明白为什么。

感谢您的帮助。

最佳答案

你不能对它进行转换，因为原始值和最终值之间没有值。

您需要 Transition 动画属性。

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

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

关于javascript - 单击时从 'display : none' 过渡到 'display:inline'，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53119393/