CSS3过渡+显示器+无prevent反弹时 [英] CSS3 transitions + display none + prevent overscroll

问题描述

所以，如果你还不熟悉，CSS3过渡不动画显示：无，因为它完全删除从DOM目标元素。因此，这里是我的问题。我有出现悬停弹出较大div的一个工具。不幸的是因为我只能在过渡 visibility：hidden的和不透明度：0 我有反弹时，由于明显隐藏层是包含在布局和从而使这是在页面的滚动条占了一个很长的弹出窗口。

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.

我开发本地，所以我没有一个活生生的例子来展示，但你可以看到在这个截屏的问题：的 http://dreamstarstudios.com/screencasts/2011-09-27_2111.s​​wf

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

在此先感谢！

推荐答案

我假设你的弹出式绝对定位，所以你能做到以下几点：

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

1. 虽然隐蔽，在弹出的顶设置为一个巨大的负值。这会将其关闭屏幕，摆脱了滚动条。


2. 在悬停时，顶设置为正确的值，并过渡透明度值。


3. 请确保您的CSS 转换规则只对透明度属性。

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.

的更新的：要添加向左摆动，并清理鼠标移开动画，可以使用下面的code：

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. 中指定了多个属性动画（不透明度，左侧，顶部）。


2. 过渡延迟 prevents被改变，直到不透明的最高值和左动画完成。这里的技巧是，当元素是：悬停，不存在延迟（混浊，左和顶级的动画都开始一次）。然而，一旦：悬停不再活跃，顶级动漫等待1秒开始之前。这给不透明度和留下了足够的时间来完成。

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.

下面是更新例如。

这篇关于CSS3过渡+显示器+无prevent反弹时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！