CSS 过渡效果：实现元素隐藏和淡入显示

可以使用 CSS 的'transition'属性来实现元素的过渡显示。具体步骤如下：

1. 首先将元素设置为默认隐藏状态，可以使用'display:none'或者'visibility:hidden'来实现。

2. 在需要显示元素的时候，先将元素的'display'或'visibility'属性设置为可见状态，然后通过 CSS 的'transition'属性来设置过渡效果。

例如，假设有一个 div 元素，初始状态为隐藏，现在需要在点击某个按钮后显示出来，并且希望有一个淡入的过渡效果。可以按照以下步骤来实现：

HTML 代码：

<button id='show-button'>显示</button>
<div id='my-div'>这是一个隐藏的 div</div>

CSS 代码：

#my-div {
  display: none;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

#my-div.show {
  display: block;
  opacity: 1;
}

JavaScript 代码：

var showButton = document.getElementById('show-button');
var myDiv = document.getElementById('my-div');

showButton.addEventListener('click', function() {
  myDiv.classList.add('show');
});

解释一下上面的代码：

首先，将 div 元素的'display'属性设置为'none'，'opacity'属性设置为 0，这样它就默认是隐藏的，并且不占用空间。

然后，通过 CSS 的'transition'属性来设置过渡效果，这里是让'opacity'属性在 0.5 秒内从 0 到 1 渐变，过渡效果为'ease-in-out'。

最后，在点击按钮的时候，通过 JavaScript 将 div 元素的'class'属性设置为'show'，这样它就会显示出来，并且会有一个淡入的过渡效果。

注意，这里是通过添加一个'class'来实现显示效果，而不是直接修改'display'属性。这是因为如果直接修改'display'属性，过渡效果会失效，所以需要通过添加一个'class'来触发过渡效果。