Flexbox menu animation

Question

I am trying to create a responsive menu with flexbox and I want to animate when it shows up on click on mobile.

<nav class="flex-nav" id="test">
        <a href="#" class="toggle-nav"> &#9776;Menu</a>
        <ul id="test">
            <li class="item1"><a href="#" >Item1</a></li>
            <li class="item2"><a href="#" >Item2</a></li>
            <li class="social"><a href="#"><i class="fa fa-linkedin"></i></a></li>
            <li class="social"><a href="#"><i class="fa fa-twitter"></i></a></li>

        </ul>
    </nav>

/CSS Code/

    .flex-nav ul{
    display:none;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.flex-nav ul.open{
    display:flex ;
    }

/jQuery/

$(function(){
        $('#test').on('click', function(){
            $('.flex-nav ul').toggleClass('open');

        }); 
    });

Anything I have tried I can't get the animation effect, I tried with the time argument on toggleClass(). Thank You!

check this https://stackoverflow.com/questions/3331353/transitions-on-the-display-property — Sachin, Jan 20 '18 at 03:01

score 1 · Answer 1 · answered Jan 20 '18 at 03:10

You can't animate display property, but if you want to simply show/hide element, take a look at opacity property, it's a very common solution:

$(function() {
  $('#test').on('click', function() {
    $('.flex-nav ul').toggleClass('open');
  }); 
});

.flex-nav ul{
  display:flex ;
  opacity: 0;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.flex-nav ul.open {  
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="flex-nav" id="test">
  <a href="#" class="toggle-nav"> &#9776;Menu</a>
  <ul id="test">
    <li class="item1"><a href="#" >Item1</a></li>
    <li class="item2"><a href="#" >Item2</a></li>
    <li class="social"><a href="#"><i class="fa fa-linkedin"></i></a></li>
    <li class="social"><a href="#"><i class="fa fa-twitter"></i></a></li>
  </ul>
</nav>

Flexbox menu animation

1 Answers1