2

How can I realize a smooth transition for my mobile menu?

The transform property is working, but I want it to happen slowly..

My Sass looks like this

  .mobile-nav
   display: none
   position: relative
   width: 100%
   background: $white
   padding: 30px 0 20px
   transform: translateY(-100%)

    @media (max-width: 775px)
     .mobile-nav.is-o
      display: block
      transform: translateY(0%)
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Codehan25
  • 2,704
  • 10
  • 47
  • 94

2 Answers2

3

The main obstacle you're facing is that the display property is not animatable.

Like a light switch, display: none is off and display: block is on. There's no middle ground, no fade effects, no CSS transitions.

However, there are multiple other properties you can use for transitions. Among them:

  • height
  • opacity
  • z-index
  • background-color

Here's an example:

.mobile-nav-toggle {
  font-size: 2em;
  cursor: pointer;
}
.mobile-nav {
  display: inline-block;
  overflow: hidden;
  width: 0;
  height: 0;
  opacity: 0;
  transition: width 1s, height 1s, opacity 0s 1s, background-color 0s 2s;
}
.mobile-nav-toggle:hover + .mobile-nav {
  width: 150px;
  height: 150px;
  opacity: 1;
  background-color: lightgreen;
  transition: 1s;
}
<div class="mobile-nav-toggle">&#9776;</div>
<div class="mobile-nav">
  <ul>
    <li><a>Item</a></li>
    <li><a>Item</a></li>
    <li><a>Item</a></li>
  </ul>
</div>

References:

Community
  • 1
  • 1
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
1

I personally use opacity combined with visibility to achieve fade effect like I would like for whole element. Remember to manipulate z-index, so you "hidden" object won't be clickable when dissapeared.

Malyo
  • 1,990
  • 7
  • 28
  • 51