0

So I have made this mobile navigation and everything is working fine. My menu icon turns in to a X and I can toggle the is-open class with jQuery. But I can't get this simple transition to work and it is driving me crazy. Can anyone please help me out?

.mobile-nav
  background: rgba(0,0,0,1)
  display: none
  padding: 20px 0
  position: absolute
  top: 44px
  transform: translateY(-100%)
  transition: all 0.3s ease-in-out
  width: 100%

@media (max-width: 770px)
  .mobile-nav.is-open
    display: block
    transform: translateY(0%)
Cylion
  • 89
  • 8

1 Answers1

0

As far as I know you can not animate an element having display:none.

Which is why your animation isn't working. You can find alternative solutions in this answer

Community
  • 1
  • 1
T J
  • 42,762
  • 13
  • 83
  • 138
  • By the time the animation runs it gets display block right? Edit: Even so you are indeed right. It worked but I do find it strange. – Cylion Oct 19 '15 at 12:29
  • @user3036405 animations occur when a property value changes from one to another. Elements having `display:none` won't be rendered at all, so its like it wasn't there previously so no transition takes place. you can read further [here](http://stackoverflow.com/a/11056610/2333214) – T J Oct 19 '15 at 12:31