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

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

单击时从“显示：无”到“显示：内联”的过渡

1 个答案: