Question

我遇到的问题似乎是阻止CSS转换在同时从display:none更改的元素上播放。

在下面的示例中，div具有相同的CSS，除了悬停在第一个上隐藏另外两个。使用visibility:hidden隐藏第二个div，使用display:none隐藏第三个div。

当您将鼠标悬停在第一个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

A simple explanation of display: none：

关闭元素的显示（它对布局没有影响）;所有后代元素也关闭了它们的显示。 该文件被渲染就像元素不存在一样。

（强调我的）

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

解决方法

使用CSS display: none实现此效果的唯一可能方法是使用每次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

＆＃13;

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

＆＃13;

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

＆＃13;

这会奏效。在鼠标输出时，第三个div也有过渡。

由`display：none`禁用CSS转换

4 个答案:

解决方法