Html CSS3转换+；显示无+；防止过卷

因此，如果您还不熟悉，CSS3转换不会设置

display:none

，因为它会从DOM中删除目标元素。这是我的问题。我有一个侧边栏，上面有一个较大的弹出div，显示在hover上。不幸的是，由于我只能在

visibility:hidden

和

opacity:0

上进行转换，因此由于布局中包含了可见的隐藏div，因此产生了一个很长的弹出窗口，这在页面的滚动条中得到了说明

寻找一些创造性的解决方案，我如何仍然可以动画没有滚动条都搞砸了

我正在开发local，因此我没有一个实例可以展示，但您可以在这个屏幕上看到问题：

---

提前谢谢

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

隐藏时，将弹出窗口

top

设置为巨大的负值。这会将其移出屏幕，并删除滚动条

悬停时，将

top

设置为正确的值，并转换

opacity

值

确保CSS

转换

规则仅适用于

不透明度

属性

HTML

<a href="">Popup go now</a>
<div class="popup">
    My cat's breath smells like cat food...
</div>

以上就是

更新：要添加左摆，并清理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;
}

它是这样做的：

指定了多个特性的动画（不透明度、左侧、顶部）

过渡延迟

防止在不透明度和左侧动画完成之前更改顶部值。这里的技巧是，当元素是

：hover

时，没有延迟（不透明度、左侧和顶部动画都会立即开始）。但是，一旦

：hover

不再处于活动状态，顶部动画将在开始前等待1秒。这将提供不透明度，并留出足够的时间来完成

---

以下是问题。

您是否尝试过使用JS删除动画后的元素？我知道JS是一个理想的组合，但在概念化上有困难，您能详细说明一下吗？jQuery在这里会很好…啊，我想在看了视频后，我更理解这个问题了。不久前，我制作了一个计算屏幕大小的“悬停卡”，以确保它始终显示在窗口的范围内（防止滚动条）。请看下面的代码：让我知道这是否给了您一个更好的想法，看起来很接近，但是当元素悬停时，它会调整并允许溢出（滚动条）吗？这似乎是我遇到的一个特别的问题，非常接近！但看看我的视频：。。。我正在转换不透明度和位置。有没有办法将您在此处展示的内容与“摆动”效果结合起来，以便也可以对该位置设置动画？是的，我可能只需要忘记摆动效果：/只是添加了一些编辑-您的左摆动可以保持完全效果（我已经找到了如何清理鼠标出动画以引导）。作为记录，我找到了我这边的错误，我希望我能投5次票，这是一个了不起的解决方案！明亮的这项杰出的CSS成就理应获得诺贝尔奖：）

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