CSS3 transitions + display none + prevent overscroll

Question

So if you're not already familiar, CSS3 transitions do not animate display: none since it removes the targeted element from the DOM altogether. So here's my issue. I have a sidebar with larger popup divs that appear on hover. Unfortunately Since I can only transition on visibility: hidden and opacity: 0 I have overscroll due to the visibly hidden divs being included in the layout and thus making a very long popup which is accounted for in the page's scrollbar.

Looking for some creative solutions for how I can still animate without having the scrollbar all screwed up.

I'm developing local so I don't have a live example to show, but you can see the problem in this screencast: http://dreamstarstudios.com/screencasts/2011-09-27_2111.swf

Thanks in advance!

Answer 1

I'm assuming your popup is absolutely positioned so you could do the following:

1. While hidden, set the popup top to a huge negative value. This moves it off the screen and gets rid of the scrollbar.
2. On hover, set the top to the correct value and transition the opacity value.
3. Make sure that your CSS transition rules are only for the opacity property.

HTML

<a href="">Popup go now</a>
<div class="popup">
    My cat's breath smells like cat food...
</div>

CSS

.popup {
   position: absolute;
   top: -2000px;
   opacity: 0;

   transition: opacity 1s ease-in-out;
}

a:hover + .popup,
.popup:hover {
   top: 30px;
   opacity: 1;   
}

Here's the above in action.

Update: To add the left swing, and clean up the mouseout animation, you can use the following code:

.popup {
   position: absolute;
   top: -2000px;
   width: 300px;
   left: 0;
   opacity: 0;

   /* Animate opacity, left and top  
      opacity and left should animate over 1s, top should animate over 0s
      opacity and left should begin immediately.  Top should start after 1s. */
   transition-property: opacity, left, top;
   transition-duration: 1s, 1s, 0s;
   transition-delay: 0s, 0s, 1s;
}

a:hover + .popup,
.popup:hover {
   top: 30px;
   left: 30px;
   opacity: 1;  

   /* All animations should start immediately */
   transition-delay: 0s;
}

It does this as follows:

1. Animation for multiple properties are specified (opacity, left, top).
2. transition-delay prevents the top value from being changed until the opacity and left animations are complete. The trick here is that when the element is :hover, there is no delay (opacity, left and top animations all start at once). However once :hover is no longer active, the top animation waits 1 second before starting. This gives opacity and left enough time to finish.

Here's the updated example.