Menu icon Foundation
How to add transition to display flex/display none

I am using the 'title-bar' class to create a drop down shows links to parts of a webpage.

It uses 'display: none' and 'display: flex' to toggle the visibility.

However, it looks abrupt and I want to use a transition.

Is there a possible work around? Any ideas?

Thank you!

transitionflex

I am using the 'title-bar' class to create a drop down shows links to parts of a webpage.

It uses 'display: none' and 'display: flex' to toggle the visibility.

However, it looks abrupt and I want to use a transition.

Is there a possible work around? Any ideas?

Thank you!

Brett Mason over 2 years ago

Could you post a CodePen showing what you are trying to do? It might help explain it and we might be able to help.

RCD over 2 years ago

Hi Brett, sorry for the delay. I will put a codepen up shortly. In the mean time here is the code snippet Im talking about.

<div class="title-bar" data-responsive-toggle="main-menu" data-hide-for="none">
  <button class="menu-icon" type="button" data-toggle></button>
  <div class="title-bar-title">Page Nav</div>
</div>
<div class="page-links row expanded" id="main-menu">
  <div class="link-row">
    <a href="#example" class="link">Example</a>
    <a href="#example" class="link">Example</a>
    <a href="#example" class="link">Example</a>
    <a href="#example" class="link">Example</a>
  </div>
</div>

In this example, the '#main-menu' id toggles 'display: none' to 'display: flex' by clicking on the '.menu-icon'.

The issue is that it is very jumpy and I would like to make it smoother. I think Jquery would be the only way to add a transition to a display property, but I am unsure of how to do that.