为什么当我更改显示属性时我的 CSS3 转换失败？

CSS3 过渡不适用于 Display 属性

问题：

为什么 CSS3 过渡在显示属性时无法正常工作被修改了吗？

答案：

当显示属性设置为“none”时，整个块元素被有效隐藏，防止任何过渡效果。或者，使用不透明度可以实现淡入淡出效果和更平滑的过渡。

替代 CSS 解决方案：

要实现平滑过渡效果，请操纵不透明度、高度和填充属性相反：

#header #button:hover > .content {
  opacity: 1;
  height: 150px;
  padding: 8px;
}

#header #button > .content {
  opacity: 0;
  height: 0;
  padding: 0 8px;
  overflow: hidden;
  transition: all .3s ease .15s;
}

工作演示：

[Fiddle](https://jsfiddle.net/alexdocker/KAyvL/)

附加说明：

• 为简洁起见，省略了供应商前缀。
• 您还可以考虑调整边框半径以创建更微妙的过渡效果。
• 请参阅此[SO讨论](https://stackoverflow.com/questions/13691003/displaynone-css3-transition)以获取类似的见解。

以上是为什么当我更改显示属性时我的 CSS3 转换失败？的详细内容。更多信息请关注PHP中文网其他相关文章！