CODEWITHSUNDEEP
csscss-transitions
drake035
drake035

Reputation: 2897

Transition property doesn't apply

On my page, clicking on a link brings a menu to the screen while pushing the page to make room for the menu. It's all animated with transition CSS property. For some reason though, some elements get correctly animated while others don't: specifically, the top bar gets no animation at all. Can anybody tell me why?

CSS

#top_menu {
    position: absolute;
    top: 0;
    background: #eee;
    padding: 20px;
    width: 100%;
}
#mobile_menu {
    position: absolute;
    left: -280px;
    background: #ddd;
    width: 280px;
    height: 100%;
    z-index: 99;

}
.left_0 {
    left: 0 !important;
}
.left_280 {
    left: 280px !important;
}
.left_minus_280 {
    left: -280px !important;
}
body,
.wrap,
#mobile_menu,
#top_menu {
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

HTML

<div id='wrap'>
  <div id='mobile_menu'>
    mobile menu
  </div>
  <div id='top_menu'>
    <a href='#'>menu</a>
  </div>
</div>

JavaScript

$( '#top_menu a' ).click(function() {
  $( "#mobile_menu, #top_menu, #wrap" ).removeClass();
  if( $('#mobile_menu').css('left') == '-280px' ) { 
    $( "#mobile_menu" ).addClass( 'left_0' );           
    $( "#top_menu" ).addClass( 'left_280' );  
    $( ".wrap" ).addClass( 'left_280' );  
  }
  else { 
    $( "#mobile_menu" ).addClass( 'left_minus_280' ); 
    $( "#top_menu" ).addClass( 'left_0' );  
    $( ".wrap" ).addClass( 'left_0' );            
  }
});

Upvotes: 0

Views: 63

Answers (2)

Daniel Stradowski
Daniel Stradowski

Reputation: 3484

You need to specify left: 0 in #top_menu.

It'll set the left edge of the top_menu to the right of the right edge of its nearest positioned ancestor #mobile_menu. So they will make a transition together.

Upvotes: 1

frnt
frnt

Reputation: 8795

Everything is fine, you just missed left 0 to add in #top_menu.

#top_menu {
    position: absolute;
    top: 0;
    background: #eee;
    padding: 20px;
    width: 100%;
    left:0;
}

Upvotes: 2

Related Questions