`display:none` 禁用了 CSS 过渡

Question

我遇到了一个问题，似乎阻止 CSS 过渡在同时从 display:none 更改的元素上播放。

在以下示例中，div 具有相同的 CSS，只是将鼠标悬停在第一个上会隐藏其他两个。第二个div用visibility:hidden隐藏，第三个用display:none隐藏。

当您将鼠标悬停在第一个 div 上时，行为与预期一致：第一个 div 转换和其他两个被隐藏。当您将鼠标移开时，行为与我的预期不同：第一个 div 转换回正常状态，第二个 div 未隐藏然后转换回正常状态，但第三个 div 未隐藏并仍处于正常状态。

我期待第三个 div 与第二个 div 的行为相匹配，并且也被取消隐藏，然后恢复正常。

div{
  width:100px;
  height:50px;
  background:red;
  
  border-radius:50%;
  
  transition: border-radius 1s;
}

#hover:hover, #hover:hover ~ div{
  border-radius:0%;
}

#hover:hover ~ #hide1{
  visibility:hidden;
}

#hover:hover ~ #hide2{
  display:none;
}

<div id="hover">hover me for transition</div>
<div id="hide1">I transition back</div>
<div id="hide2">but I don't</div>

由于第二个 div 按预期工作，使用 visibility:hidden 和一些定位 CSS 很容易提出替代解决方案，但是否可以使用 display:none 仅在 CSS 中完成此操作？如果不是，为什么display:none 会以这种方式影响其他转换？

注意：这似乎很容易找到，但我的搜索只发现了有关尝试转换 display 属性本身的问题，而不是它对其他转换的副作用。

Answer 1

simple explanation of display: none:

关闭元素的显示（对布局没有影响）；全部 后代元素的显示也会关闭。 文件 呈现为好像该元素不存在。

（强调我的）

过渡未触发，因为它从未启动。 div 在悬停时被完全删除，并以 border-radius: 50% 的初始状态返回。

解决方法

使用 display: none 仅使用 CSS 实现此效果的唯一可能方法是使用每次出现 display: none div 时都会触发的动画。

div {
  width: 100px;
  height: 50px;
  background: red;
  border-radius: 50%;
  transition: border-radius 1s;
  animation: display 1s;
}
#hover:hover,
#hover:hover ~ div {
  border-radius: 0%;
}
#hover:hover ~ #hide1 {
  visibility: hidden;
}
#hover:hover ~ #hide2 {
  display: none;
}
@keyframes display {
  0% {
    border-radius: 0;
  }
  100% {
    border-radius: 50%;
  }
}

<div id="hover">hover me for transition</div>
<div id="hide1">I transition back</div>
<div id="hide2">but I don't (unless I have an animation)</div>

Answer 2

不，你不能使用display:none;

原因：

当使用display:none; - 元素将被隐藏，页面将显示为好像该元素不存在一样。因此，当您将鼠标悬停在它上面时 - 元素被完全删除......并且 border-radius:0%; 永远不会被应用。当您将鼠标悬停时 - 元素立即显示为 css 告诉它 - 使用border-radius:50%;

visibility:hidden; 隐藏一个元素，但该元素仍将占用与以前相同的空间。该元素将被隐藏，但仍会影响布局。

Answer 3

你可以在 CSS 中使用 transition 作为数值属性，所以你应该使用 opacity 和 transition: all 1s 来做到这一点：

div{
  width:100px;
  height:50px;
  background:red;
  
  border-radius:50%;
  
  transition: all 1s;
}

#hover:hover, #hover:hover ~ div{
  border-radius:0%;
}

#hover:hover ~ #hide1{
  visibility:hidden;
}

#hover:hover ~ #hide2{
  opacity: 0;
}

<div id="hover">hover me for transition</div>
<div id="hide1">I transition back</div>
<div id="hide2">but I don't</div>

Answer 4

div{
  width:100px;
  height:50px;
  background:red;
  border-radius:50%;
  transition: border-radius 1s;
}

#hover:hover, #hover:hover ~ div{
  border-radius:0%;
}

#hover:hover ~ #hide1{
  visibility:hidden;
}

#hover:hover ~ #hide2{
  visibility: hidden;
}

<div id="hover">hover me for transition</div>
<div id="hide1">I transition back</div>
<div id="hide2">but I don't</div>

这会奏效。鼠标移出第三个 div 也有过渡。