CSS3转换+显示无+防止过度滚动 [英] CSS3 transitions + display none + prevent overscroll

问题描述

因此，如果你不熟悉，CSS3转换不会动画 display：none ，因为它从DOM中删除目标元素。所以这里是我的问题。我有一个侧边栏有更大的弹出式div，出现在悬停。不幸的是，因为我只能转换 visibility：hidden 和 opacity：0 我有过度滚动由于明显隐藏的div

寻找一些创造性的解决方案，我仍然可以动画，而没有滚动条

我正在开发本地，所以我没有一个实例来显示，但你可以看到这个屏幕录像的问题： http://dreamstarstudios.com/screencasts/2011-09-27_2111.swf

提前感谢！

解决方案

我假设你的弹出框是绝对定位的您可以执行以下操作：

1. 隐藏时，将弹出 top 巨大的负值。


2. 在悬停时，将顶部设置为正确的值，然后转换 opacity 值。


3. 确保CSS 转换 c p>
   
   

    < a href =>弹出式视窗立即进行< / a> 
   < div class =popup> 
   我的猫的呼吸气味像猫食... 
   < / div> 
     

   CSS

     .popup {
    position：absolute; 
    top：-2000px; 
    opacity：0; 
    
    transition：opacity 1s ease-in-out; 
   } 
    
    a：hover + .popup，
    .popup：hover {
    top：30px; 
    opacity：1; 
   } 
     

   以上是 in action 。

   
   
   

   更新：要添加左摆， mouseout动画，您可以使用以下代码：

     .popup {
    position：absolute; 
    top：-2000px; 
    width：300px; 
    left：0; 
    opacity：0; 
    
    / *动画不透明度，左和顶
   不透明度和左应动画超过1s，顶应该动画超过0s 
   不透明度和左应立即开始。顶部应该在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; 
    
    / *所有动画应立即开始* / 
    transition-delay：0s; 
   } 
     

   这样做如下：

   
   
   1. 指定多个属性的动画（opacity，left，top）。
   
   
   2. transition-delay 防止顶值被更改，直到不透明度和左动画完成。这里的诀窍是当元素：hover 时，没有延迟（不透明度，左边和顶部动画都会立刻开始）。但是，一旦：hover 不再处于活动状态，顶部动画会在开始前等待1秒钟。
   
   
   

   这里是更新示例。

   
   

   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!

   解决方案

   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.

   这篇关于CSS3转换+显示无+防止过度滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！