0

I try to create a menu with a submenu that will appear slowly using CSS with the property transition.

For that the menu appears I change the class of the element above using 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>

But the transition is not working and I don't understand why.

thank for your help.

Kvasir
  • 1,197
  • 4
  • 17
  • 31

1 Answers1

0

You cant make a transition of it because there is no value between original value and end value.

You need to Transition an animateable property.

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

Mostly properties that has value number are animateable

Nikko Khresna
  • 1,024
  • 8
  • 10