Question

因此，如果您还不熟悉，CSS3过渡不会为display: none设置动画，因为它会完全从DOM中删除目标元素。所以这是我的问题。我有一个带有较大弹出窗口的侧边栏，显示在悬停状态。不幸的是，因为我只能在visibility: hidden和opacity: 0上进行转换，所以由于在布局中包含了明显隐藏的div，因此会产生一个非常长的弹出窗口，这会在页面的滚动条中占用。

寻找一些有创意的解决方案，让我可以在没有滚动条的情况下进行动画制作。

我正在开发本地，因此我没有要显示的实例，但您可以在此截屏视频中看到问题：http://dreamstarstudios.com/screencasts/2011-09-27_2111.swf

提前致谢！

Answer 1

我假设您的弹出窗口位置绝对正确，因此您可以执行以下操作：

隐藏时，将弹出窗口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;   
}

以上是in action。

更新：要添加左侧摆动并清理鼠标移动动画，您可以使用以下代码：

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

这样做如下：

指定了多个属性的动画（不透明度，左侧，顶部）。
transition-delay可防止在不透明度和左侧动画完成之前更改顶部值。这里的诀窍是，当元素为:hover时，没有延迟（不透明度，左侧和顶部动画全部一次开始）。但是，一旦:hover不再处于活动状态，顶级动画将在启动前等待1秒。这会给出不透明度并留下足够的时间来完成。

这是updated example。

CSS3过渡+显示无+阻止过度滚动

1 个答案: