Geek Answers Handbook

CSS3 transitions + no mapping + overflow prevention

So, if you are not familiar yet, CSS3 transitions do not expect display: none , since it completely removes the target element from the DOM. So here is my problem. I have a sidebar with large popup divs that appear on hover. Unfortunately, since I can only switch to visibility: hidden and opacity: 0 , I have over scrolling because visible hidden divs are included in the layout and thus make a very long pop-up that counts in the scroll bar of the page.

Look for some creative solutions on how I can revive, without having screenshots at the same time.

I am developing a local one, so I do not 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!

+4
source share
1 answer

I assume that your popup is absolutely positioned, so you can do the following:

  • While hidden, set the top popup to a huge negative value. This moves it off the screen and eliminates the scroll bar.
  • In hover mode, set top to the correct value and move the opacity value.
  • Make sure your CSS transition rules are only for the opacity property.

HTML

 <a href="">Popup go now</a> <div class="popup"> My cat 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 is the above in action .

Update. To add a left turn and clear the mouse 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; }

He does it as follows:

  • Animation for several properties is set (opacity, left, top).
  • transition-delay prevents the upper value from changing 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 start immediately). However, as soon as :hover no longer active, the top animation waits 1 second before starting. This gives opacity and leaves enough time to complete.

Here's an updated example .

+8
source

More articles:


All Articles