CSS3过渡效果 + display none + 防止页面过度滚动

Question

CSS3过渡效果 + display none + 防止页面过度滚动

4

如果你还不熟悉的话，CSS3过渡动画不会对display: none进行动画处理，因为它会将目标元素从DOM中完全移除。所以这是我的问题。我有一个带有较大弹出式div的侧边栏，当鼠标悬停时会出现。不幸的是，由于我只能在visibility:hidden和opacity:0上进行过渡处理，因此由于可见性隐藏的div包含在布局中，导致页面的滚动条非常长。

寻找一些创意解决方案，以使我仍然可以进行动画处理而不会让滚动条出现问题。

我正在本地开发，因此没有实际示例可供展示，但您可以在此屏幕录像中查看问题：http://dreamstarstudios.com/screencasts/2011-09-27_2111.swf

提前感谢！

- Brian

你尝试过使用JS移除动画后的元素吗？ - Kai

我知道JS是这方面的理想组合，但我还有些难以理解，你能详细说明一下吗？在这里使用jQuery会很棒... - Brian

啊，看了视频后我觉得我更好地理解了这个问题。我之前做过一个“悬浮卡片”，它计算屏幕大小以确保它始终显示在窗口范围内（防止滚动条出现）。请参考此代码：https://github.com/kaimallea/Starcraft-2-Hovercards/blob/master/js/sc2-hovercards.js#L1727，如果这能让你更好地理解，请告诉我。 - Kai

这似乎很接近，但当鼠标悬停在元素上时，它会调整并允许溢出（滚动条）吗？看起来我在这个问题上遇到了一些特殊的独特问题。 - Brian

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Pat · Accepted Answer

我假设你的弹出窗口是绝对定位的，所以可以按照以下方式操作：

在隐藏时，将弹出窗口的 top 设为极小的负值。这将使其移出屏幕并消除滚动条。
鼠标悬停时，将 top 设为正确的值，并过渡 opacity 值。
确保你的 CSS transition 规则只适用于 opacity 属性。

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;   
}

这里是上述的实际效果。

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

.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;
}

它是这样做的：

指定多个属性的动画（opacity，left，top）。
transition-delay 防止 top 值在 opacity 和 left 动画完成之前被更改。这里的诀窍在于当元素处于 :hover 状态时，没有延迟（opacity、left 和 top 动画同时开始）。但是一旦 :hover 不再激活，top 动画会等待 1 秒钟才开始。这给了 opacity 和 left 足够的时间来完成。

这是更新后的示例。