Css 将显示块与不透明度淡入相结合（引导选项卡）？

我有两类元素：淡入淡出和隐藏

<div id="example" class="fade hidden"></div>

.fade {
    opacity: 0;
    -webkit-transition: opacity .15s linear;
    -o-transition: opacity .15s linear;
    transition: opacity .15s linear;
}

.hidden {display: none;}

我的问题是，通过执行display:block，没有不透明度的动画。只是元素完整地显示出来

无论如何，要保持动画不透明度淡入淡出？

可以使用位置：绝对，而不是使用显示。请参见以下示例：

.褪色{ 不透明度：0； 过渡：不透明度1s线性； } .隐藏{ 位置：绝对位置； 指针事件：无； } .淡入{ 不透明度：1； } 点击 实例

---

Text…

为什么不单独使用不透明度？？？@FridayAmeh，因为不透明度不会隐藏边距和填充，因此元素仍会占用浏览器中的空间。See second Response的可能重复项。@tavkomann该答案不起作用，因为可见性：hidden；对我的情况不起作用。

.fade.in {
    opacity: 1;
}

.shown {display: block !important;}