display:none后没有过度动画,transition未生效

CSS 处理 transition 遇到 display 时无法生效的解决方法🍉

在前端开发中，当我们想要实现一个元素从隐藏到显示的过渡动画时，通常会遇到一个常见的问题，那就是transition 与 display 属性的兼容性问题。具体来说，当我们在 CSS 动画中使用 display 属性来控制元素的显示和隐藏时，过渡动画无法生效。原因在于，display 属性本身并不支持过渡动画，因此如果使用 display: none 来隐藏元素时，transition 就无法正常工作。

那么如何在不使用 JavaScript 的情况下解决这个问题呢？答案是通过使用 visibility 和 opacity 这两个 CSS 属性，既能实现隐藏与显示的效果，同时又能保持过渡动画的平滑过渡。

解决方案

我们可以通过如下 CSS 来实现这个效果：

  /* 默认隐藏状态 */
  #bg {
   
    opacity: 0;