CSS转换被display：none禁用 [英] CSS transition disabled by `display:none`

问题描述

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

I'm having an issue which seems to be preventing CSS transitions from playing on an element which is simultaneously changing from display:none.

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

In the following example, the divs have identical CSS, except that hovering over the first one hides the other two. The second div is hidden using visibility:hidden, and the third is hidden using display:none.

当您将鼠标悬停在第一个div上时，其行为与预期的一样：第一个div转换和其他两个隐藏。当您将鼠标移出时，其行为与我预期的有所不同：第一个div过渡回正常状态，第二个div被取消隐藏，然后过渡回正常状态，但是第三个div被取消隐藏并且仍处于正常状态。

When you mouse over the first div, the behaviour is as expected: the first div transitions and the other two are hidden. When you mouse out, the behaviour is different from what I would expect: the first div transitions back to normal, the second div is unhidden then transitions back to normal, but the third div is unhidden and still in the normal state.

我期望第三个div匹配第二个div的行为，并且也未被隐藏，然后过渡回正常状态。

I was expecting for the third div to match the behaviour of the second and also be unhidden, then transition back to normal.

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 会以这种方式影响其他转换？

Since the second div works as expected, it's fairly easy to come up with alternate solutions using visibility:hidden and some positioning CSS, but is it possible to accomplish this in just CSS using display:none? If not, why does display:none affect other transitions in this way?

注意：这看起来像会很容易找到，但我的搜索仅提出了有关尝试转换 display 属性本身的问题，而不是其对其他转换的副作用。

Note: This seems like something that would be easy to find, but my searches only turned up questions about attempting to transition the display property itself, not its side-effects on other transitions.

推荐答案

A 显示的简单说明：无 ：

Turns不显示元素（对布局没有影响）；所有
后代元素也都关闭了显示。 文档
被呈现为好像元素不存在。

（强调我的意思）

由于从未启动转换，因此未触发该转换。 div在悬停时被完全移除，并以 border-radius：50％返回其初始状态。

The transition is not triggered because it was never started. The div was removed completely on hover and returned in its initial state with border-radius: 50%.

使用 display实现此效果的唯一可能方法：无仅使用CSS就是使用动画每次显示：无 div出现时都会被触发。

The only possible way to achieve this affect with display: none using just CSS is to use an animation that will be triggered each time the display: none div appears.

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>

这篇关于CSS转换被display：none禁用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！