转变不透明度和可见性 [英] Transitioning opacity and visibility

问题描述

我有一个元素，它的可见性为：隐藏的，直到将鼠标悬停为止，并在不透明度上进行过渡以实现良好的淡入淡出。问题在于，淡入淡出仅以一种方式起作用，因为当元素立即变为 visibility：hidden 时，它将隐藏不透明度过渡。我该如何解决？

I have an element that is visibility: hidden until hovered over, with a transition on the opacity for a nice fade. The problem is that fade only works one way, because when the element instantly becomes visibility: hidden which hides the opacity transition. How can I work around this?

编辑：要清楚，重要的是，元素具有可见性：隐藏直到悬停被激活。可以与具有不透明度：0 的元素进行交互，而具有可见性：隐藏的元素则不能进行交互。

To be clear, it is important that the element have visibility: hidden until the hover is activated. An element with opacity: 0 can be interacted with, while an element with visibility: hidden cannot.

下面的示例。请注意弹出窗口是如何淡出而不是淡出的。

Example below. Notice how the popup fades in, but not out.

.hover {
  display: inline-block;
  position: relative;
}

.label {
  width: 80px;
  border: 1px solid black;
  padding: 20px;
}

.popup {
  width: 90px;
  padding: 15px;
  position: absolute;
  top: 100%;
  border: 1px dashed black;
  cursor: pointer;
  
  visibility: hidden;
  opacity: 0;
  transition: opacity 3s;
}

.hover:hover .popup {
  visibility: visible;
  opacity: 1;
}

<div class="hover">
  <div class="label">Hover me</div>
  <div class="popup">I am only visible on hover</div>
</div>

推荐答案

您仅对不透明度过渡 c $ c>，如果您需要转换可以使用多个属性，则必须使用 all 或使用属性名称。

You only applied transition on opacity, if you need the transition works several properties you have to use all or use property names.

只需在CSS部分以下更改

Just change below css part

.popup {
  width: 90px;
  padding: 15px;
  position: absolute;
  top: 100%;
  border: 1px dashed black;
  cursor: pointer;
  visibility: hidden;
  opacity: 0;
  transition: all 3s; /*Change the opacity to all*/
}

.hover {
  display: inline-block;
  position: relative;
}

.label {
  width: 80px;
  border: 1px solid black;
  padding: 20px;
}

.popup {
  width: 90px;
  padding: 15px;
  position: absolute;
  top: 100%;
  border: 1px dashed black;
  cursor: pointer;
  visibility: hidden;
  opacity: 0;
  transition: all 3s; /*Change the opacity to all*/
}

.hover:hover .popup {
  visibility: visible;
  opacity: 1;
}

<div class="hover">
  <div class="label">Hover me</div>
  <div class="popup">I am only visible on hover</div>
</div>

这篇关于转变不透明度和可见性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！