How to eliminate the flicker from this JQuery/CSS3 Animation

Question

I'm trying to do an animation using css3/JQuery while clicking the side bar, the current div slides to the left and disappears, while another div which was hidden slides in sort of like a page transition.

this is what i've ATM : fiddle

HTML:

<div id='wrap'>
 <header></header>
 <div id='content'>
     <div id='contentMenu'></div>
     <div id='page1'>
         <div id='left'></div>
         <div id='right'></div>
     </div>
     <div id='page2'></div>
 </div>
 <footer></footer>
</div>

CSS:

* {
   margin:0;
   padding:0;
}
html, body, #wrap {
   height:100%;
}
header {
   height:15%;
   background: #0080FF;
}
#content {
   width:100%;
   height:75%;
   min-height:75%;
}
#contentMenu {
   width:2%;
   height:100%;
   background:black;
   display:inline-block;
}
#page1 {
   width:97%;
   height:100%;
   display:inline-block;
   -webkit-transition:height 5s;
}
#page1 div {
   display:inline-block;
}
#left {
   width:50%;
   height:100%;
   background:#FF8000;
}
#right {
   width:40%;
   height:100%;
   background:grey;
   display:none;
}
#page2 {
   width:49%;
   height:100%;
   background:purple;
   display:none ;
}
footer {
   background: #58D3F7;
   height:10%;
   z-index:99;
}
.dis{
   display:inline-block !important;
}

Script:

$('#contentMenu').click(function () {
   $('#page1').toggle('fast', 'swing', function () {
      $('#page2').toggleClass('dis'); 
    });
});

but when the hidden div is given visibility, you can see a flicker in the footer.

• is there anyway to eliminate this?

• if i remove -webkit-transition:height 5s;, the div is animated from top right to bottom left ( toggle() animates height , width and opacity at same time) is it possible to disable the change in height and animate simply from right to left?

• is there anyway to avoid the jQuery and achieve this using pure css3?

Any other ways to achieve the same using css animations also would be greatly appreciated :)

Answer 1

I like the overflow hidden idea as well. Also, you could get rid of most of the jquery by using css for the animation. Using transition position the div absolutely outside of the div with overflow:hidden. Then set .active to the position where you want it.

Answer 2

Adding overflow: hidden on #content should fix your problem :

#content {
    overflow: hidden;
    width:100%;
    height:75%;
    min-height:75%;
}

( updated JSFiddle here )