由`display:none`禁用CSS转换

Question

我遇到了一个问题,似乎阻止了CSS转换在同时改变的元素上播放display:none.

在下面的示例中,div具有相同的CSS,除了悬停在第一个上隐藏另外两个.第二个div隐藏使用visibility:hidden,第三个div 隐藏使用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的替代解决方案,但是有可能只用CSS来完成这个display:none吗？如果没有,为什么display:none会以这种方式影响其他过渡？

注意:这似乎很容易找到,但我的搜索只提出了试图转换display属性本身的问题,而不是它对其他转换的副作用.

Answer 1

一个简单的解释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>